为什么在包含行内元素的块容器的行高中添加了额外的 2px？

Question

.link {
  background-color: red;
  font-size:16px;
}

.link span {
  background-color: royalblue;
  font-size:16px;
  line-height:16px;
}

<div class="link">
    <span>textg</span>
</div>

容器的 line-height 应该是 font-size 的大小，即 16px，而不是 18.4px。如果将 font-size 减小到 15px，则 line-height 变为 17.4px。这些 2.4px 是从哪里来的？

这是一张快照以防万一。

Answer 1

容器的 line-height 应该是 font-size 的大小，即 16px

不，不是。您永远不会设置父级的line-height，因此the default value 将应用在1.2 附近。在某些情况下它可能会有所不同，但在所有情况下肯定都大于1，因此大于定义的font-size

设置一个明确的line-height，你会得到你想要的：

.link {
  background-color: red;
  font-size:16px;
  line-height:1; /* or any pixel value */
}

.link span {
  background-color: royalblue;
  font-size:16px;
}

<div class="link">
    <span>textg</span>
</div>

不需要设置内联元素的line-height，因为它会从父元素继承。

还将line-height 设置为仅内联元素不会对其父元素执行任何操作，因为您有两个行高。定义 line box 最小高度的父级之一和可以只增加 line box 高度（超过最小值）并且永远不会减小它的子级之一。

.link {
  background-color: red;
  font-size:16px;
  line-height:16px;
  margin:10px;
}

.link span {
  background-color: royalblue;
  font-size:16px;
}

<div class="link">
    <span style="line-height:0;">I will do nothing !!</span>
</div>


<div class="link">
    <span style="line-height:40px;">I will make the parent bigger</span>
</div>

在内容由行内元素组成的块容器元素上，'line-height' 指定元素内行框的最小高度。

在不可替换的内联元素上，'line-height' 指定用于计算行框高度的高度。 ^ref