The exact height of a text line (font-size + line-height)

Question

How can a text line be controlled exactly from the height point of view?

I mean, it appears that the font-size and line-height are not giving the span (or other inline element) its exact height.

Take a look at this: http://jsfiddle.net/ghxgouba/

HTML:

<div>
    <img src="http://lorempixel.com/100/50" />
    <span>salut</span>
</div>

CSS:

span {
    font-size: 50px;
    line-height: 50px;
    background: darkblue;
    color: #fff;
    font-family: Arial;
}
img {
    vertical-align: top;
}

The span is 56px height, where it should be exactly 50px, shouldn't?

Thanks.

Answer 1

line-height works only with the block-level elements, which mean you need to apply display: block; or display: inline-block; to your span to have line-height working. Hope this helps.

http://jsfiddle.net/ghxgouba/3/

span {
    font-size: 50px;
    line-height: 50px;
    background: darkblue;
    color: #fff;
    font-family: Arial;
    display: inline-block;
}
img {
    vertical-align: top;
}
#ret {
    margin-top: 30px;
}