文本行的确切高度（字体大小 + 行高）

Question

如何从高度角度精确控制文本行？

我的意思是，字体大小和行高似乎没有为 span（或其他内联元素）提供准确的高度。

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

span 是 56px 高度，应该正好是 50px，不是吗？

谢谢。

Answer 1

line-height 仅适用于块级元素，这意味着您需要将 display: block; 或 display: inline-block; 应用于您的跨度才能使 line-height 起作用。希望这有帮助。

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

Answer 2

为span元素添加display:inline-block，那么您将获得与图像完全相同的高度。 http://jsfiddle.net/ghxgouba/1/

（对于普通的内联元素，根据字体大小和行高计算高度的方法不同。更多信息，请参阅规范：http://www.w3.org/TR/CSS21/visudet.html#line-height）

文本行的确切高度（字体大小 + 行高）

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

html

css

height

font-size