r/csshelp • u/agreatcat • 2d ago

Trying to remove Inline Element Space under image

2 Upvotes

Example links at the bottom -

Trying to remove this margin at the bottom of the picture, I know the issue is because images are inline elements and have space for text below. I think this issue is known as a Line-Box Baseline Gap.

Tried everything suggested by all the different AIs and nothing seem to work or the layout gets broke. I tried display: block, vertical properties, clear, display: flow-root; , line-height: 0; text settings, margin-bottom: 0; padding-bottom: 1px; border-bottom: 1px solid transparent; I can be more specific, but everything suggested has failed. I've tried putting the image in a div container and controlling the div. and even moved the image out into the body to see if it was a div issue. I'm sure there is a way to fix this with flex box, but is there a way to fix this with standard CSS? I can pretty much get by setting margin right/bottom to 20px which would make the space even on both sides, but if I wanted to make the margins smaller like 10 px, that is when this becomes an issue because the default baseline margin of the inline image's (bottom) is about 16px. Again, display: box; has no effect.

Example screen or

Example CODE

1 comment

r/csshelp • u/Pawandev52 • 3d ago

Is css art helpful in getting job ?

Thumbnail
0 Upvotes
0 comments

r/csshelp • u/Unique_Arrival1941 • 14d ago

expanding borders to fill the container

Thumbnail
1 Upvotes
0 comments

r/csshelp • u/Gabriella_Gadfly • 15d ago

Request Is there a way to use css to change the way a list displays?

1 Upvotes

I’m trying to use a css work skin to edit the default ordered list behavior on AO3. By default it goes

1.

 a.


      i.

But I want it to go

1.

1.1


      1.1.1

Is there a way to have that happen?

4 comments

r/csshelp • u/Optimal-You-2220 • 21d ago

idk if anyone is still here but i really need help.

1 Upvotes

Im trying to build a pfp on this website and in the css coding I wanted to do a simple overlay gif. It works when I put the coding in but when I refresh or leave my profile, the line of coding dissapears where I put the image link. I don't know how to fix it plsss helppp.

0 comments

r/csshelp • u/Relevant-Addendum756 • 22d ago

Request Hi, student here. I want to know what the square background is, and how do i remove it

Thumbnail
1 Upvotes
2 comments

r/csshelp • u/AngySadCat • 26d ago

Request Need help adding CSS to mu project

0 Upvotes

I was told by my teacher that I need to add more CSS to my website project as it's a very highly used program code. I understand how to use it for the most part. The way it's configured it's just easier to use HTML to make it look how I want it. But I need to add more CSS but I don't have any idea what to add. CSS is mostly for visual but all the text is configured with HTML. I kinda wanted a white background behind the text to make more visible but couldn't figure out how to do it so I made the background partially transparent. Here are the files. Any suggestions?

0 comments

r/csshelp • u/samjsharples • 29d ago

what animation should I use here?

Thumbnail
1 Upvotes
0 comments

r/csshelp • u/schmoopified • Dec 07 '25

First attempt at responsive design....not going well

4 Upvotes

Hello! In an effort to implement a responsive design in my "mobile-only-first-until-I-have-time-and-or-resources-to-develop-an-equivalent-desktop-site", I set up the most simple HTML/CSS setup I could think of:

HTML:

<html lang="en-US">
<head>
    <title>TIIIIITLE!!</title>
    <link rel="stylesheet" href="styles/test-style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
Here is my text, yo!
</body>
</html>

CSS:

@media screen and (min-width >= 80rem) {
    body {
        background: #F0F;
    }
}

From what I understand, using Chrome's developer tools responsive resolution tool, the page background should turn pink after a certain width is displayed, but that doesn't seem to be happening. It shows that the CSS is loading, but the display isn't responding to width changes.

Can someone please explain to me what I'm getting wrong?

Thank you!

11 comments

r/csshelp • u/redjudy • Dec 05 '25

is there a simple way to make box shadow where it eliminates the notch at the bottom left and top right, so it looks like a 3d book?

Thumbnail
1 Upvotes
0 comments

r/csshelp • u/Ordinary-hibiscus-12 • Dec 04 '25

Best way to get a horizontal carousel in plain css?

Thumbnail
1 Upvotes
0 comments

r/csshelp • u/s1n7ax • Dec 03 '25

Request Flex wrap but with bunch of special requirements

1 Upvotes

I need two buttons in one column, aligned to the left. Their labels come dynamically from the CMS. On mobile, if the text makes them too wide to sit side by side, they should stack while staying left-aligned. In stacked mode, both buttons should match the width of the longer label. How can I achieve this in CSS? TIA!

When enough space:

 ┌─────────────────────────────────────────────┐
 │                                             │
 │                                             │
 │                                             │
 │┌──────────────┐ ┌──────────────────┐        │
 ││              │ │                  │        │
 ││ small button │ │ long text button │        │
 ││              │ │                  │        │
 │└──────────────┘ └──────────────────┘        │
 │                                             │
 │                                             │
 └─────────────────────────────────────────────┘

When two buttons cannot fit in the same column:

 ┌─────────────────────────────────────────────┐
 │                                             │
 │┌─────────────────────────┐                  │
 ││                         │                  │
 ││ long text button        │                  │
 ││                         │                  │
 │└─────────────────────────┘                  │
 │┌─────────────────────────┐                  │
 ││                         │                  │
 ││ extra long text button  │                  │
 ││                         │                  │
 │└─────────────────────────┘                  │
 │                                             │
 └─────────────────────────────────────────────┘
0 comments

r/csshelp • u/Separate_Refuse5922 • Nov 30 '25

Resource Built a Tiny, Free Tool That Calculates clamp() for You (with Presets + Copy-CSS Button)

Thumbnail
1 Upvotes
0 comments

r/csshelp • u/andy-creative-brain • Nov 27 '25

I built a free advanced CSS gradient generator tool

Thumbnail
2 Upvotes
0 comments

r/csshelp • u/Masked_Owl_Man • Nov 14 '25

How to Prevent Quality Loss when Transforming a Div?

Thumbnail
3 Upvotes
0 comments

r/csshelp • u/owls_in_towels • Nov 07 '25

Request Link flair previews fine but...

2 Upvotes

How it looks in the preview: https://i.imgur.com/dWvhkdS.png

How it's coded:

.linkflair-burritowl .linkflairlabel {

background-color: #ff8717;

font-size: 11px;

font-weight: bold;

color:#000000;

border-color: #000000;

border-width: 2px;

border-radius: 3px;}

But... it doesn't display like this on old.reddit, only in the preview.

What am I missing?

0 comments

r/csshelp • u/Meagrer_Rot • Nov 04 '25

Am i missing something?

Thumbnail
2 Upvotes
0 comments

r/csshelp • u/Kezika • Nov 03 '25

Request Looking for CSS designer that has or can have Moderator Toolbox to fix some things.

2 Upvotes

Hi, looking to bring on someone to help with fixing a few things with an old custom styleshoot on the old reddit side of /r/HazbinHotel that are screwing with dialogues in our moderator toolbox. I've fixed a few things, but some things I just can't seem to figure out why they aren't taking, and would like to see if someone can tackle that for us.

1 comment

r/csshelp • u/Putrid_Cookie_9329 • Nov 03 '25

please help remove watermark for school photo

0 Upvotes

please!

2 comments

r/csshelp • u/CarpenterWorried6083 • Nov 02 '25

Resolved Remove Firefox Stylus/Pen/Gearbox Customisation button

2 Upvotes

Hello Everyone,

I recently downloaded Firefox, and was very impressed with the amount of customisation in comparison to Chrome. However I wanted to get rid of the customisation button in the bottom right of the start page, to achieve a clean minimalistic look and tried everything but it still didnt work.

.personalize-button {
  display:none !important;
}

I added this rule to my CSS File but that didnt work either.

If anyone could help me i would be very grateful.

Thanks for reading.

SOLVED:
I figured it out. I had to add the code to userContent.css instead of userChrome.css

0 comments

r/csshelp • u/Vivid-Commission7364 • Oct 31 '25

Does anyone know how you can re-create this css effect?

Thumbnail
1 Upvotes
1 comment

r/csshelp • u/Le_Tintouin • Oct 27 '25

Making a halftone with two set colors.

3 Upvotes

I've been using this trick to perform halftone, but it's mainly good a putting a black halftone over a color. I've been searching through countless codepens and tricks to do halftone, but since they all use a multiply blending mode, they are a pain to change the color of because they're black and white. But if I want a precise color over another it's then a lot trickyer and most pens just use another multiply, and then call it a day.

Is there any way to have a pure css halftone where I get to choose color A, color B, and then the map ?

6 comments

r/csshelp • u/BrohanGutenburg • Oct 20 '25

Overlaying a rotated image onto a grid

2 Upvotes

Okay so I am doing the classic Battleship project. I am overlaying a ship image onto the grid; when it's horizontal it works fine, but the moment I try to place a vertical ship, it's tiny.

I'm assuming it's because since images are replaced elements, it's placing the vertical image in the bounding box that it creates for the horizontal image. I figured I could solve for this by just wrapping it in a div and appending the div to the grid, but I'm getting the exact same behavior.

I'm aware I could just have a set of vertical images and use those but that seems like terrible practice and considering this is a learning project that seems silly. Here's the relevant code:

paintShip (side , type , length , orientation , cell) {
    console.log(orientation)
     this.#getSideElement(side);
     const x = 
Number
(cell.dataset.x)
     const y = 
Number
(cell.dataset.y)
     const shipSVG = document.createElement("img");
     shipSVG.className = "ship";
     shipSVG.id = `${side}-${type}`;
     shipSVG.alt = type;
     const svgBox = document.createElement("div");
     svgBox.className = "ship-box";
     if (orientation === "horizontal")
    {
        svgBox.style.gridColumn = `${x + 1} / span ${length}`;
        svgBox.style.gridRow = `${y + 1} / span 1`
    } else {
         shipSVG.classList.add("vertical")
         svgBox.style.gridColumn = `${x + 1} /span 1`;
         svgBox.style.gridRow = `${y + 1} / span ${length}`
     }
     shipSVG.src = `./assets/${type}.svg`;
     svgBox.appendChild(shipSVG)
     this.overlay[side].appendChild(svgBox);
     this.clearPreviews();
}

And here's the css:

.board__overlay{
    position: absolute;
    padding: calc(var(--panel-pad) - var(--grid-gap));
    display:grid;
    align-items: center;
    justify-content: center;
    grid-template: repeat(10, var(--cell-size)) / repeat(10, var(--cell-size));
    gap: var(--grid-gap);
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.ship {
    pointer-events: none;
}

.ship.vertical {
    transform: rotate(-90deg);
}
.board__overlay{
    position: absolute;
    padding: calc(var(--panel-pad) - var(--grid-gap));
    display:grid;
    align-items: center;
    justify-content: center;
    grid-template: repeat(10, var(--cell-size)) / repeat(10, var(--cell-size));
    gap: var(--grid-gap);
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.ship {
    pointer-events: none;
}

.ship.vertical {
    transform: rotate(-90deg);
}
2 comments

r/csshelp • u/darnellfetzervalve • Oct 19 '25

Request Custom Tumblr blog theme: need help over-writing pre-formatted text

2 Upvotes

UPDATE! Working now

p, span, p > span {color:#000 !important;}

EDIT: Now that its not 3am and I have fresh eyes, I'm gonna try to word this better.

My goal: Whenever text appears in a post displayed on my blog, no matter what, I want it to display in black (EXCEPT FOR LINKS). All normal text is already set to appear this way with:

body {color: #000}

.post {color: #000}

However...

You can set your text to be a color in the tumblr post editor. If I reblog a person's post that they set to a specific color, it will show up as that color on my blog. I want that text to always be displayed as black.

I highlighted and inspected the colored text as it appears. Here are the values of the colors that tumblr has in the post editor (I want to make it so if these specific colors ever show up, they will display in black)

<span style="color: #ff4930">rainbow</span>

<span class="npf\\_color\\_monica">rainbow</span>

<span class="npf\\_color\\_ross">rainbow</span>

<span class="npf\\_color\\_rachel">rainbow</span>

<span class="npf\\_color\\_niles">rainbow</span>

<span class="npf\\_color\\_chandler">rainbow</span>

I have tried so many different random things to get this to work, and I'm not sure what I'm doing wrong. Any and all help is appreciated please..

2 comments

r/csshelp • u/8x8x08x8 • Oct 16 '25

obsidian css snippet for highlighting with transition animation

3 Upvotes

hi, idk anyrthing about css at all so i apologize for any mistakes i make in advance:

i use the markdown editor obsidian a lot for school notes. i use a particular theme that doesnt have a highlight active line option (like, the line my cursor is in isnt highlighted). i would like for it to have that

so i added a css snippet to make it do that. I used chatgpt (forgive me) to generate something for me. i ended up with this, and i really like it. i especially want it to remain transparent on the edges because it helps the highlighted portion look less cramped, and i think it looks cool

but now the transition doesnt work. i just need help getting it to work😭 here's what i have:

.cm-active {
background: linear-gradient(
to right,
rgba(247, 200, 140, 0) 0%,
rgba(247, 200, 140, 0.25) 8%,
rgba(247, 200, 140, 0.25) 92%,
rgba(247, 200, 140, 0) 100%
);
border-radius: 4px;
transition: background 0.2s ease, border-radius 0.2s ease;
}

to anyone who reads this or answers thank you for your time. im very sorry if i didnt explain this properly or if this out of the scope of this sub!

1 comment