Question

I am having a hard time understanding how font-size is working in the following html snippet:

.container {
    padding: 20px;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul li {
    margin: 0;
    padding: 0;
    background: blue;
    height: 50px;
    line-height: 50px;
    color: white;
}

ul li span {
    border: 1px solid red;
    margin: 0;
    padding: 0;
}

#test1 li {
    font-size: 48px;
}

#test2 li {
    font-size: 42px;
}​

<div class="container">
    <ul id="test1">
        <li><span>Test</span></li>        
    </ul>
</div>

<div class="container">
    <ul id="test2">
        <li><span>Test</span></li>
    </ul>
</div>​

I want my li element to be exactly 50 pixels tall, and I want the text/span to be centered vertically within it. Everything is vertical, but when I set font-size to 48px with a 2px red border, the border is pushed outside of the li element. It almost seems like there is an invisible padding/margin applied.

Here is a jsfiddle demonstrating the “issue”: http://jsfiddle.net/qtVK3/

When I inspect the span element in Chrome, it shows the actual height of the span element is 57px. Where does the extra 7px come from?

Answer 1

display: inline-block

Is needed in the span because it is an inline elements. By default you cannot add top or bottom padding to an inline element only left and right. So the span will be padded even if you put padding to 0.

Also you need to change your line-height to 48px.

line-height: 48px;