内联块元素的行高问题

Question

出于某种原因,这些锚标签不应用它们自己的行高,而是使用父标记.

它仅适用于锚标记的行高高于其父标记或者display属性设置为block的情况.

我是否错过了有关行高属性的内容？

.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正在申请,但你需要了解它是如何应用.如果我们参考规范:

在内容由内联级元素组成的块容器元素上,'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>

做一个类比,就像设置height/ min-height内部的flexbox容器一样.

当元素的高度较小时,我们可以对齐:

.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行为相同,你可以使用内联元素强制换行,你将获得相同的效果:

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

在父元素内添加一个文本,您将看到行高将再次触发以定义文本所在的行:

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

一些有趣的问题:

为什么跨度的线高无用？

我没有"得到"vertical-align css属性

为什么线盒之间有空间,而不是半导体？

^{1:计算涉及的不仅仅是线高,但我们不会在这里详述.更多细节:https://stackoverflow.com/a/52285183/8620333}