为什么 inline 和 inline-block 具有相同的文本内容的不同高度

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指定元素内行框的最小高度。^ref

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

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

以上适用于inline元素，其中line-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>

---

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

“高度”属性不适用。 内容区域的高度应以字体为准，但本规范并未具体说明如何。例如，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. inline-block 将得到1x1remx0.75 = 0.75x16px = 12px 和边框/填充我们得到20px

2. 内联元素在逻辑上将拥有前一个内容区域的 75%，因此 0.75x21px = 15.75px 和边框/填充我们得到 23.75px ~ 24px

---

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

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

What determines the space between the highest and lowest letter and the top and bottom border of the element the letter's in?

How can I calculate the size of font when using different font-types?

---

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

Answer 2

规则 1：您不能为 display: inline; 元素设置 height 和 width。

规则 2：line-height 属性不适用于 display: inline-block; 元素，而是应用于它的子元素。

第一种情况：
在 body 上设置的 line-height: 1.5 属性会影响您的两个 span 元素。
对于inline 跨度，即使应用了line-height，您的元素的高度也不会因为上面的规则1而改变。
对于inline-block 跨度，它不会应用于它，而是应用于其子元素，在您的情况下，由于规则2，它是另一个span 元素。由于 line-height 被应用到它的子元素，高度增加了，因为它的父元素是 inline-block 元素，所以高度被应用到它，这就是为什么你会看到高度有一点增加。

在第二种情况下：
引导徽章类已经包含一个 line-height: 1 属性，它覆盖了您身体的 line-height: 1.5 属性。
对于 inline 跨度，由于 规则 1，没有任何影响。
但是，对于 inline-block 跨度，而不是主体的 line-height: 1.5，徽章类 line-height: 1 被应用于其内部跨度元素，因此您会看到与第一种情况相比它的高度更小。

注意：虽然inline 元素不尊重高度和宽度，但它们尊重元素的左右填充属性。

Answer 3

inline 和 inline-block 的主要区别在于后者允许在元素上设置宽度和高度。此外，对于display: inline，不考虑顶部和底部边距和填充，而对于display: inline-block，它们是。不一样

display: inline

span.box {
  display: inline;  /* the default for span */
  width: 100px;
  height: 160px;
  padding: 18px;
  border: 3px dashed red;
}

<p>Lorem, ipsum dolor sit amet <span class="box">Inline!</span> consectetur adipisicing elit. Qui,<span class="box">Inline again!</span> itaque sit incidunt totam harum ratione nulla. Labore quis eligendi aperiam laborum harum. Perferendis, laborum unde.
  Tenetur eveniet praesentium corporis perspiciatis?</p>

display: inline-block

span.box {
  display: inline-block;
  width: 100px;
  height: 160px;
  padding: 18px;
  border: 3px dashed red;
}

<p>Lorem, ipsum dolor sit amet <span class="box">Inline-block!</span> consectetur adipisicing elit. Qui,<span class="box">Inline-block again!</span> itaque sit incidunt totam harum ratione nulla. Labore quis eligendi aperiam laborum harum. Perferendis, laborum unde.
  Tenetur eveniet praesentium corporis perspiciatis?</p>

注意inline-block 的高度和宽度是如何保留的。