为什么内联和内联块在相同的文本内容下具有不同的高度 [英] Why inline and inline-block have different height with the same text content

问题描述

在下面的代码中:

 <链接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红色实心； padding:3px 0">< span> asbbb</span></span>< span class ="d-inline-block ml-2" style ="border:1px蓝色实心； 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 类型的高度是如何计算的?

解决方案

这与 line-height 的工作方式以及每个元素的高度计算方式有关.

让我们从一个简单的示例开始，以突出显示 line-height

的效果

  span {边框:1px纯红色；内边距:5px;line-height:50px;}  

 < span>一些文本</span>< span style ="display:inline-block">某些文本</span>  

请注意在第二种情况下高度是如何变大的，而在第一种情况下不是.

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

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

在不可替换的嵌入式元素上，"line-height"指定用于计算线盒高度的高度.

以上内容适用于 inline 元素，其中line-height不会增加高度，而只会增加其所属行框的高度

  span {边框:1px纯红色；内边距:5px;}  

 < div style ="border:1px纯蓝色；">< span>一些文字</span></div>< br>< div style ="border:1px纯蓝色；">< span style ="line-height:100px;">一些文字</span></div>  

---

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

"height"属性不适用.内容区域的高度应基于字体，但是此规范未指定具体方式.UA可以例如使用字体的em-box或最大升序和降序.(后者将确保在em-box上方或下方具有部分文字的字形仍位于内容区域内，但导致不同字体的大小不同的box；前者将确保作者可以控制相对于'line-height'的背景样式.，但导致字形在其内容区域之外绘画.) ^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

---

¹ 为了确定内容区域的计算方式，您需要查看字体的设计方式并找到一些 complex 指标.

以下一些相关问题可以为您提供帮助:

确定最高和最低字母与该字母所在元素的上下边界之间的空间的原因是什么?

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

---

关于高度计算的另一个相关问题:如何确定块和内联元素的内容框的高度

In the below code:

<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>

I created two lines to show the height difference between inline and inline-block in the same line.

The first line shows inline-block is a little bit higher than inline sibling.

In the second line, I added bootstrap class badge to both, and it shows inline element is a bit higher than its inline-block sibling.

For both lines, I can see from the DevTools that the inner span has the same height, but they end up having different height with their parent container.

I wonder how the height of the two display types are calculated?

解决方案

This is related to how line-height works and how the height of each element is calculated.

Let's start with a trivial example to highlight the effect of line-height

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

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

Note how in the second case the height is getting bigger but not in the first case.

On a block container element whose content is composed of inline-level elements, line-height specifies the minimal height of line boxes within the element.^ref

The above apply to the inline-block element and it's clear that line-height will increase the height. To be more accurate, the height of the inline-block is the sum of its line boxes height and in your case we have only one defined with the line-height value.

On a non-replaced inline element, 'line-height' specifies the height that is used in the calculation of the line box height.

The above apply to the inline element where the line-height won't increase the height but will only increase the height of the line box where it belong

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>

---

To identify the height of an inline element, it's a bit tricky because it depends on the font properties and is covered in another part of the specification:

The 'height' property does not apply. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the 'line-height', but leads to glyphs painting outside their content area.) ^ref

---

Considering this we can identify the height of each one.

For the first line:

1. the inline-block is inherting line-height:1.5 and font-size:1rem so we will get a line-box height equal to 1.5x1rem = 1.5x16px = 24px. we add the padding/border to get the 32px
2. the inline element is getting a content height for the font equal to 21px¹ and adding padding/border we get 29px

For the second line the .badge will apply font-size: 75%;line-height: 1; so

1. the inline-block will get 1x1remx0.75 = 0.75x16px = 12px and with border/padding we get 20px

2. the inline element will logically have 75% of the previous content area so 0.75x21px = 15.75px and with border/padding we get 23.75px ~ 24px

---

¹In order to identify how the content area is calculated you need to see how the font is designed and find some complex metrics.

below some a related questions that can help you:

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?

---

Another related question around height calculation: How to determine height of content-box of a block and inline element

这篇关于为什么内联和内联块在相同的文本内容下具有不同的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！