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

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.

Solution 1:

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.

Solution 2:

In order for line-height property to work, div should has display property equal to block

.app-button-label{
    line-height: 20px;
    display: block;
 }

Solution 3:

I was facing this problem with divs in mobile view - the line height was way too big and line-height wasn't working! I managed to make it work by adding "display:block", per advice here: Why isn't the CSS property 'line-height' letting me make tight line-spaces in Chrome?

Hope this helps anyone else facing the same problem in future