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

css em
daGUY picture daGUY · Oct 12, 2012 · Viewed 43.4k times · Source

http://jsfiddle.net/mJxn4/

This is very odd: I have a few lines of text wrapped in an <em> tag. No matter what I do, lowering the value for line-height below 17px has no effect. I can bump the line-height 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 line-height is specified anywhere else in the CSS, so nothing is overriding it. That couldn't be the case anyway because I'm adjusting the line-height 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.

Answer

Ibu picture Ibu · Oct 12, 2012

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.

Related questions

Responsive font size in CSS

I've created a site using the Zurb Foundation 3 grid. Each page has a large h1: When I resize the browser to mobile size the large font doesn't adjust and causes the browser to include a horizontal scroll to accommodate for …

Read More
Why em instead of px?

I heard you should define sizes and distances in your stylesheet with em instead of in pixels. So the question is why should I use em instead of px when defining styles in css? Is there a good example that …

Read More
What is the em font-size unit? How much is it in pixels?

I want to know what the em unit is, and how much 1em is when converted to pixels (px). I also read somewhere about some IE bug, to overcome which body font-size should be set to something, but couldn't follow …

Read More