daGUY daGUY - 1 month ago 5x
CSS Question

Why can't I decrease the line-height of this text?


This is very odd: I have a few lines of text wrapped in an

tag. No matter what I do, lowering the value for
below 17px has no effect. I can bump the
up to greater than 17px and it'll apply, but I can't get it lower than 17px.

The CSS in question is:

#others .item em {
font-size: 13px;
line-height: 17px;

Try adjusting the line height both higher and lower and run the updated fiddle after each change, and you'll see what I mean.

Why would this be? No
is specified anywhere else in the CSS, so nothing is overriding it. That couldn't be the case anyway because I'm adjusting the
up and down within the same selector, so it doesn't make sense that a higher value would apply, but a lower value would get overridden.

Ibu Ibu

Because the em tag is inline and its line-height cannot be lower than its parent div.

For example, if you set the line-height of the parent to 10px, then you would be able to decrease the line-height of em tag to 10px as well.