CODEWITHSUNDEEP
htmlcssheightfont-size
trd
trd

Reputation: 91

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

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.

Upvotes: 0

Views: 3092

Answers (2)

Dariusz Sikorski
Dariusz Sikorski

Reputation: 4407

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;
}

Upvotes: 2

C3roe
C3roe

Reputation: 96316

Add display:inline-block for the span element, then you will get exactly the same height as the image. http://jsfiddle.net/ghxgouba/1/

(For a normal inline element, the height calculation based on font size and line height just works different. For more, consult the specification: http://www.w3.org/TR/CSS21/visudet.html#line-height)

Upvotes: 1

Related Questions