内联块元素的行高问题答案

【问题标题】：Line height issue with inline-block elements内联块元素的行高问题
【发布时间】：2019-06-17 21:37:00
【问题描述】：

出于某种原因，这些锚标记没有应用自己的行高，而是使用父级的。

仅适用于锚标记的行高高于其父标记或显示属性设置为块的情况。

我是否遗漏了有关 line-height 属性的内容？

.container {
  max-width: 200px;
  border: 2px black solid;
  line-height: 5;
}

.container>a {
  /*display: block; if uncomment this the line-height will work*/
  line-height: 1.5;
  width: 100%;
}

<div class=container>
  <a>First</a>
  <a>Second</a>
  <a>Third</a>
  <a>Fourth</a>
</div>

【问题讨论】：

你是什么意思他们使用父母的行高？
使用 > line-height: 15px;对于标签
@MarcHjorth 在我的小提琴中它按预期工作，但是当锚标签设置为 display: inline block 它不jsfiddle.net/q2xL5gok/1
@jackthecoder 你能在问题文本中添加一个inline-block 示例吗？当前的 sn-p 可能有点混乱，因为它不包含 inline-block 并且按预期工作

标签： html css

【解决方案1】：

line-height 正在申请，但您需要了解它是如何申请的。如果我们参考specification：

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

通过在父元素上设置line-height:5，您可以设置行框的最小高度。

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

通过设置line-height:1.5，您定义了行框内元素的高度。

为方便起见，您在一个高度等于 5¹ 的 linebox 中有一个高度等于 1.5 的元素，但您不能在视觉上看到这个。如果增加 child 的 line-height 并达到5，那么您将达到最小高度，并且您将开始增加之前由父元素定义的 linebox。

要查看此内容，您需要申请 vertical-align。如果子元素的行高小于父元素的行高（子元素的高度小于行框的高度）可以对齐：

.container {
  max-width: 200px;
  border: 2px black solid;
  line-height: 5;
}

.container>a {
  line-height: 1.5;
}

<div class="container">
  <a>First</a>
  <a style="vertical-align:top;">Second</a>
  <a>Third</a>
  <a style="vertical-align:bottom;">Fourth</a>
</div>

如果你增加 line-height，你会看到对齐没有效果，因为元素的高度与父元素的 linebox 相等，并且没有垂直对齐的空间：

.container {
  max-width: 200px;
  border: 2px black solid;
  line-height: 5;
}

.container>a {
  line-height: 5;
}

<div class=container>
  <a>First</a>
  <a style="vertical-align:top;">Second</a>
  <a>Third</a>
  <a style="vertical-align:bottom;">Fourth</a>
</div>

打个比方，就像在 flexbox 容器中设置height/min-height。

当元素高度较小时，我们可以对齐：

.container {
  max-width: 200px;
  border: 2px black solid;
  min-height:100px;
  display:flex;
  align-items:flex-start;
}

.container>a {
  height:20px;
  background:red;
}

<div class=container>
  <a>First</a>
  <a style="align-self:center;">Second</a>
  <a>Third</a>
  <a style="align-self:flex-end;">Fourth</a>
</div>

但是当高度更大并且达到父级定义的最小值时，没有什么可以对齐的，如果我们不断增加子级的高度，父级的整体高度可能会增加：

.container {
  max-width: 200px;
  border: 2px black solid;
  min-height:100px;
  display:flex;
  align-items:flex-start;
}

.container>a {
  height:110px;
  background:red;
}

<div class=container>
  <a>First</a>
  <a style="align-self:center;">Second</a>
  <a>Third</a>
  <a style="align-self:flex-end;">Fourth</a>
</div>

您可能还注意到，您在a 上应用了width:100%，这对内联元素没有影响，但将应用到inline-block，使每个元素放置在不同的行上。同样的逻辑仍然适用：每一行都有一个由父元素line-height 定义的最小高度，并且只有当子元素的行高更大时才能增加。

要证明inline 和inline-block 的行为相同，您可以使用内联元素强制换行，您将获得相同的效果：

.container {
  max-width: 200px;
  border: 2px black solid;
  line-height: 5;
}

.container>a {
  line-height: 1.5;
}
.alt > a{
  display:inline-block;
  width:100%;
}

<div class=container>
  <a>First</a><br>
  <a>Second</a><br>
  <a>Third</a><br>
  <a>Fourth</a>
</div>

<div class="container alt">
  <a>First</a>
  <a>Second</a>
  <a>Third</a>
  <a>Fourth</a>
</div>

现在，如果您将a 设置为块元素，则父容器内将不再有内联级元素，因此其行高将无效

.container {
  max-width: 200px;
  border: 2px black solid;
  line-height: 5;
}

.container>a {
  display: block;
  line-height: 1.5;
  width: 100%;
}

<div class=container>
  <a>First</a>
  <a>Second</a>
  <a>Third</a>
  <a>Fourth</a>
</div>

在父元素内添加一个文本，你会看到 line-height 会再次敲击来定义文本所在的行：

.container {
  max-width: 200px;
  border: 2px black solid;
  line-height: 5;
}

.container>a {
  display: block;
  line-height: 1.5;
  width: 100%;
}

<div class=container>
  <a>First</a>
  <a>Second</a>
  <a>Third</a>
  <a>Fourth</a>
  some text
</div>

一些有趣的问题：

Why is the span's line-height useless?

How does the vertical-align property work?

Why is there space between line boxes, not due to half leading?

^{1：计算涉及的不仅仅是行高，但我们不会在这里详细说明。更多细节在这里：https://stackoverflow.com/a/52285183/8620333}

【讨论】：

7 sn-ps 并使用<sup> 就像<small> +1