为什么高度会随着字体的缩小而增加？

Question

我有一个具有特定行高的块，我在其中插入带有::before伪元素的内容。

.block::before {
  content:'text here';
}

这很有效。但是，如果我也给内容一个较小的字体

.block::before {
  font-size:.6em;
  content:'text here';
}

该块实际上变得更高。那是为什么？

JsFiddle。顶行没有字体大小更改，底行没有。

现在我发现可能的解决方案是将伪元素的line-height设置为0。或1em。甚至到normal。那么发生了什么？通过将字体大小设置为line-height，.6em是否设置为某个奇怪的值？为什么呢？

PS虽然这看似重复（请参阅右侧列表），但到目前为止我所阅读的答案都没有解释为什么设置line-height:normal解决了问题。必须发生一些事情，将行高度隐式设置为更大的值。这就是我想要找到的。

Answer 1

编辑：这个问题最近引起了很多新的关注，所以这里有一个更新，以使它更有用。

---

Alohci的解决方案是正确的，但对于更具图形倾向的人来说可能并不十分清楚。

所以请允许我用图片来澄清解决方案。

首先，行高是作为其计算大小继承的，因此虽然它以em单位指定，但子项将以像素为单位继承值。例如，如果字体大小为20px且行高为3em，则行高将为60像素，即使对于具有不同字体大小的后代（除非它们指定自己的行高）。 / p>

现在让我们假设一个1/4下行的字体。也就是说，如果你有20px字体，下降器是5像素，上升器是15像素。然后将剩余的行高（在这种情况下，40像素）在基线的上方和下方平均分配，就像这样。

对于字体较小（0.6em或12像素）的块，行高的剩余量为60-12或48像素，也可以平均分配：24以上和24以下基线。

然后，如果我们将两种字体组合在同一基线上，您将看到线高度没有以相同的方式划分，因此包含块的总高度会增加，即使两个线高度都是60像素。 / p>

希望这能解释事情！

Answer 2

.lorem，.ipsum，.dolor和.sit框的高度分别是它们包含的单行框的高度。

每个线框的高度是基线以上的高度的最大值+线的支柱基线和线中文本的最大高度。因为支柱和文本在基线上对齐。

为清楚起见，em中的高度，指的是整个容器的字体大小（即主体元素）

在.ipsum中，（字体大小为1em）基线上方的高度为1em（上半部分）+ 13 / 16em（上升部分，大约），支柱和文字以及高度在基线以下是1em（半场领先）+ 3 / 16em（下降，大约）+ 1em（下半场领先），共计3em。

在.sit中（字体大小为0.6em），基线以上的高度是[1em（上半部分）+ 13 / 16em（上半部分）的最大值，并且[1.2] em（上半部分）+ 0.6 x 13 / 16em（ascender，about）为文本]，低于基线的高度是[1em（下半部分）+ 3 / 16em的最大值（下降，约）为支柱]和[1.2em（下半部前导）+ 0.6 x 3 / 16em（下降，约）为文本]。

评估并转换为十进制表示基线以上1.8125em，基线以下1.3125em，总计3.125em，大于.ipsum的3em。

Answer 3

因为已经有两个答案可以很好地说明为什么增加高度，所以要快速解决此问题，您只需删除line-height中的单位。

.lorem, .ipsum, .dolor, .sit {
    line-height:3; border:1px solid green;
}

根据MDN

line-height CSS属性设置行框的高度。它的 通常用于设置文本行之间的距离。上 块级元素，它指定线框的最小高度 在元素内。在非replaced内联元素上，它指定 用于计算线框高度的高度。

值
正常取决于用户代理。桌面浏览器（包括Firefox）使用的默认值约为1.2，具体取决于 元素的字体系列。

数字（无单位）使用的值是此无单位number乘以元素自己的字体大小。计算值是 与指定的number相同。 在大多数情况下，这是首选 设置行高并避免由于以下原因导致的意外结果的方法 继承。

长度指定的length用于计算线框高度。 以em单位给出的值可能会产生意外结果。

百分比，相对于元素本身的字体大小。计算值是此percentage乘以元素的 计算的字体大小。 百分比值可能会产生意外结果 。

So basically your question is one of the cases of unexpected results due to inheritance。

.container {
    display:inline-block;
}
.lorem, .ipsum, .dolor, .sit {
    line-height:3; border:1px solid green;
}
.ipsum:before {
    content:'world!';
}
.sit:before {
    font-size:.6rem;
    content:'world!';
}

<div class="container">
    <div class="lorem">Hello</div>
</div>
<div class="container">
    <div class="ipsum"></div>
</div>
<hr style="clear:both"/>
<div class="container">
    <div class="dolor">Hello</div>
</div>
<div class="container">
    <div class="sit"></div>
</div>

Answer 4

嗨，请在你的盒子上添加一个特定的高度......

.lorem, .ipsum, .dolor, .sit {
    border:1px solid green;
    height:30px;/*changes*/
}

小提琴：http://jsfiddle.net/jxf29/

Answer 5

.sit：之前的字体属性影响了这一点，css的content属性非常严格地遵循当前元素的css属性，

因此，您可以在创建内容属性的相同样式中操作content属性的值

例如

sit {
  color: green;
}
sit:before{
  content: "text-here";
  color: red;
} 

这会强调颜色为红色。