Question

This is difficult for me to put right but let me try.

I have horizontal ul li a menu:

Please note that I have omitted some CSS that keep it simple

<ul>
    <li class='featuring'><a href='#'>Whatever</a></li>
    <li class='empty-item'></li>
    <li><a href='#'>Item1</a></li>
    <li><a href='#'>Item2</a></li>
    ...
</ul> 

ul li a{
    line-height: 2.4em;
    font-size: 1.1em;
    ...
}
ul li.empty-item{
    border-top: 1.7em solid white;
    border-bottom: 1.7em solid white;
    border-left: 1em solid #240B3B;
}

Above code gives this:

Which is great except I wanna change that kindle font-size so I add:

ul li.featuring a{
    font-size: 1.4em;
    ...
}

And unwanted distortion appears:

I suppose that I don’t understand line-height property well enough? I though that after changing ul li.featuring a font size container size would stay same and only font size inside target element would change but instead element’s height scales while leaving rest of the menu items in same proportion and out of sync.
What I thought is that line-height(3.4em) and font-size(1.4em) difference(2em) is cut in half and distributed evenly which would mean that no container height would change???

Hope it is clear.

Thank you.

Answer 1

I was certain you’d have an answer by now, but since no one’s jumping all over this I’ll give it a shot.

It’s not so much an issue with line-height as it is an issue with relative VS absolute units of measurement.

em is a relative unit of measurement, based on the font size. When you increase the font size, you increase all the property values that are measured in em, such as your line-height here.

• Original: http://jsfiddle.net/MWuHL/
• With your added CSS (shows the extra space): http://jsfiddle.net/MWuHL/1/

Using an absolute unit like px will not change based on font size:

• With your added CSS, but measuring line-height in px: http://jsfiddle.net/MWuHL/2/