为什么内联和内联块在相同的文本内容下具有不同的高度

Question

在下面的代码中：

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<span class="d-inline" style="border: 1px red solid; padding: 3px 0"><span>asbbb</span></span>
  <span class="d-inline-block ml-2" style="border: 1px blue solid; padding: 3px 0;"><span>inline-block</span></span>
<div>
  
<br/>
  <span class="d-inline badge" style="border: 1px red solid"><span>asbbb</span></span>
  <span class="d-inline-block badge ml-2" style="border: 1px blue solid"><span>inline-block</span></span>
</div>

inline我创建了两条线来显示同一行之间和inline-block同一行中的高度差。

第一行显示inline-block比兄弟姐妹高一点inline。

在第二行中，我badge向两者添加了引导类，它显示inline元素比其同级元素要高一些inline-block。

对于这两行，我可以从 DevTools 中看到内部span具有相同的高度，但它们最终与父容器具有不同的高度。

我想知道这两种类型的高度display是如何计算的？

Answer 1

这与line-height工作原理以及每个元素的高度如何计算有关。

让我们从一个简单的例子开始来强调一下效果line-height

span {
  border:1px solid red;
  padding:5px;
  line-height:50px;
}

<span>some text</span> <span style="display:inline-block">some text</span>

请注意，在第二种情况下高度会变大，但在第一种情况下不会变大。

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

上面的内容适用于inline-block元素，很明显 line-height 会增加高度。更准确地说，内联块的高度是其行框高度的总和，在您的情况下，我们只定义了一个值line-height。

在非替换内联元素上，“line-height”指定用于计算行框高度的高度。

以上适用于inlineline-height 不会增加高度但只会增加其所属行框高度的元素

span {
  border:1px solid red;
  padding:5px;
}

<div style="border:1px solid blue;">
<span>some text</span>
</div>
<br>
<div style="border:1px solid blue;">
<span style="line-height:100px;">some text</span>
</div>

要确定内联元素的高度，有点棘手，因为它取决于字体属性，并且在规范的另一部分中进行了介绍：

“高度”属性不适用。内容区域的高度应该基于 font，但是这个规范没有指定如何。UA可以例如使用em-box或字体的最大上升部分和下降部分。（后者将确保部分位于 em-box 上方或下方的字形仍然落在内容区域内，但会导致不同字体的框大小不同；前者将确保作者可以控制相对于“行高”的背景样式，但会导致字形在其内容区域之外绘制。）^ref

考虑到这一点，我们可以确定每个人的高度。

对于第一行：

1. 内联块正在继承line-height:1.5，font-size:1rem因此我们将得到一个等于 的行框高度1.5x1rem = 1.5x16px = 24px。我们添加填充/边框以获得32px
2. 内联元素的字体内容高度等于21px¹并添加填充/边框，我们得到29px

对于第二行，.badge将适用font-size: 75%;line-height: 1;这样

1. 内联块将得到1x1remx0.75 = 0.75x16px = 12px，并且带有边框/填充，我们得到20px

2. 逻辑上，内联元素将占据先前内容区域的 75%，因此0.75x21px = 15.75px通过边框/填充，我们得到23.75px ~ 24px

¹为了确定内容区域的计算方式，您需要了解字体的设计方式并找到一些复杂的指标。

以下是一些可以帮助您的相关问题：

什么决定了字母所在元素的最高和最低字母以及顶部和底部边框之间的间距？

使用不同字体类型时如何计算字体大小？

关于高度计算的另一个相关问题：How to certain height of content-box of a block and inline element