给定以下内容（同样在JSFiddle上）：
div {
font-size: 28px;
outline: 1px solid red;
width: 40%;
float: left;
line-height: 36px;
}
div:first-child::before {
content: "Hi!";
display: inline-block;
vertical-align: middle;
outline: 1px solid blue;
font-size: 8px;
}<div>xHello, world!</div>
<div>xHello, world!</div>第二个div（即没有垂直对齐的中间内容）的高度为36px（如预期的那样；每行中的单行框的高度为36px line-height）。
此处的第一个div高39像素（带有子像素渲染，预计此处会有一些细微变化，因此39像素/ 40像素都是合理的预期），因为内容::before的线框超出了“正常”内容的36像素，这是由于它的垂直对齐方式。我如何才能使包含块（即div）仅扩展到36像素高（假设我不关心内容是否::before溢出）？
将其从正常流中移出的典型方法在这里不起作用，因为它不再垂直对齐。考虑到块级元素的高度取决于其中最底部的线框，这是否合理？
所述::before元件继承36px行高。据我了解，由于您使用的是居中文本的垂直对齐方法，因此不需要该行高。实际上，此不必要的高线高引起了此问题。重置它：
div {
font-size: 28px;
outline: 1px solid red;
width: 40%;
float: left;
line-height: 36px;
}
div:first-child::before {
content: "Hi!";
display: inline-block;
vertical-align: middle;
outline: 1px solid blue;
font-size: 8px;
/* the line height is inherited, reset it */
line-height: normal;
}<div>xHello, world!</div>
<div>xHello, world!</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句