logo标签列表

具有 inline-block 元素的行高问题

htmlcss
8

出于某种原因，这些锚点标签没有应用它们自己的行高，而是使用了父元素的行高。

只有在锚点标签具有比其父元素更高的行高或显示属性设置为块时才会出现这种情况。

我是否错过了关于行高属性的某些内容？

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

他们使用父元素的行高是什么意思？ - Marc Hjorth
使用以下代码来设置a标签的行高：> line-height: 15px; - Hariom Singh
@MarcHjorth 在我的jsfiddle中它按预期工作，但当锚点设置为display:inline-block时，它不起作用https://jsfiddle.net/q2xL5gok/1/ - jackthecoder
@jackthecoder，你能在问题文本中添加一个inline-block的例子吗？当前的代码片段可能有点令人困惑，因为它不包含inline-block并且按预期工作。 - andreymal
1个回答
11
line-height 起作用了，但您需要了解它是如何起作用的。如果我们参考 规范：

对于一个由内联级别元素组成内容的块容器元素，'line-height' 指定了该元素中行框最小高度。

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

对于一个非替换的内联元素，'line-height' 指定了行盒高度计算时使用的高度。

通过设置 line-height:1.5，您定义了行框内的元素高度。
为了更容易理解，您有一个等于 1.5 高度的元素，位于等于 51 的线框中，但您不能在视觉上看到这一点。如果您增加子元素的行高并达到 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>

你可能会注意到，你在 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>

在父元素中添加文本，您会发现行高再次起作用，定义文本所在的行：

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

一些有趣的问题：

为什么span元素的line-height属性无效？

vertical-align属性如何工作？

为什么行框之间有空格，而不是因为一半的行间距？


1: 这个计算涉及到的不仅仅是line-height属性，但我们不会在这里详细说明。更多细节请参考：https://dev59.com/tK7la4cB1Zd3GeqPbFEj#52285183

3
7个片段，使用 <sup> 作为 <small> 的替代品 +1 - zer00ne
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接