Is there an invisible padding / margin for font size?

I find it difficult to understand how the font size works in the following html fragment:

.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 element to libe exactly 50 pixels high, and I want the text / span to be vertically centered inside it. Everything is vertical, but when I set the font size to 48 pixels with a red 2px border, the border is pushed out of the li element. It seems like an invisible additive / margin is being applied.

Here is the jsfiddle demonstrating the "problem": http://jsfiddle.net/qtVK3/

When I test an element spanin Chrome, it shows that the actual height of the span element is 57 pixels. Where do the extra 7px come from?