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

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

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

文本行的确切高度（font-size + line-height）

2 个答案: