时间戳

首页 > 解决方案 > 内联块元素的行高问题

html - 内联块元素的行高问题

问题描述

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

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

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

标签： htmlcss

解决方案

正在应用，line-height但您需要了解它是如何应用的。如果我们参考规范：

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

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

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

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

为了使它更容易，您在一个高度等于11.5的 linebox 内有一个高度等于高度的元素，但您无法直观地看到这一点。如果你增加 child 的 line-height 并达到你将达到最小高度，你将开始增加之前由父元素定义的 linebox。55

要看到这一点，您需要申请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>

您可能还会注意到，您正在应用which 不会对内联元素产生影响，但会应用于width:100%使每个元素放置在不同的行上。同样的逻辑仍然适用：每一行都有一个由父元素定义的最小高度，并且只有当子元素的行高更大时才能增加。ainline-blockline-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>

一些有趣的问题：

为什么跨度的 line-height 没用？

垂直对齐属性如何工作？

为什么行框之间有空格，而不是由于一半领先？


1：计算涉及的不仅仅是行高，这里不再详述。更多细节在这里：https ://stackoverflow.com/a/52285183/8620333

推荐阅读