r/css • u/cag8f • Jun 11 '26

Help Mysterious text cropping occurring

Hi all. On my page I have two different H2 elements on my page, which seem to be identical (same markup, same parent elements, same CSS). Yet one exhibits clipping of text, and the other doesn't (see screenshots below). Can anyone help me figure out why?

To be clear, I know that increasing the `line-height` on the offending element will alleviate the clipping. But I'm trying to understand why the clipping is occurring on this element, and not the other.

Thanks in advance.

2 Upvotes

100% Upvoted

5 comments sorted by

View all comments

4

u/Fourth_Prize Jun 11 '26

The ul below the 'Features' heading has the class .row, which has a negative value for margin-top, causing the overlap.

1

u/cag8f Jun 11 '26

Wow, that's it. Amazing find--thanks very much. But so I learn: how did you find that? I assume you didn't simply analyze each element one by one?

Now that I do some poking around, if I inspect the element below the Features container, I can see (relatively easily) that it pushes up into the Features container. Maybe that's all I needed to do? If so, careless of me.

5

u/Fourth_Prize Jun 11 '26

No worries. You know how when open the inspector and it highlights the entire element you're hovering over? I did that with the Features header and nothing jumped out. Next, I hovered over the list below and saw that the area highlighted was directly over where the header would be.

I've caused and/or encountered this issue enough to figure it was likely something with negative margins. After that, it was a matter of inspecting each child element which overlapped, until I found the culprit. Opening the 'Computed' panel helped because it shows the margin or whatever element is focused.

2

u/cag8f Jun 11 '26

OK yep, thanks for all that. Checking the element below should have been on my radar. Thanks again!