Question

由于某些原因，这些定位标记未应用其自身的行高，而是使用父级的行高。

仅在锚标记的行高高于其父标记的行高度或将display属性设置为block时应用。

我是否错过了有关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>

Answer 1

line-height正在应用，但是您需要了解它的应用方式。如果我们引用specification：

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

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

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

通过设置line-height:1.5，您可以定义线框的高度。 ¹

为简化起见，您在高度等于1.5的线框内有一个高度等于5的线框，但看不到它。如果您增加子级的行高并达到5，则将达到最小高度，然后开始增加父元素定义的行框。

要查看此内容，您需要应用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>

如果增加行高，您将看到对齐方式无效，因为行框的高度与父行框的高度相等，并且没有垂直对齐的空间：

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

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

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

.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 is useless?

I do not "get" the vertical-align css property

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

^{1：计算涉及的不仅仅是行高，但是我们在这里不详细介绍。此处有更多详细信息：https://stackoverflow.com/a/52285183/8620333}

内联块元素的线高问题

1 个答案: