理解 inline-element、vertical-align、line-box 和 line-height答案

【问题标题】：Understand inline-element, vertical-align, line-box and line-height理解 inline-element、vertical-align、line-box 和 line-height
【发布时间】：2017-09-04 11:21:55
【问题描述】：

vertical-align:bottom，表示底部的行内框匹配其行框的底部，所以在我的例子中，span2 的行内框是绿色的，其行高为 100px，继承自其父母。它的line-box是黑色的，也有line-height:100px。所以它们是底部对齐的。见图片：

我已经知道了：

1.vertical-align 仅适用于 inline/inline-block 元素

2.vertical-align 是基于 line-height，而不是容器的高度！

3.在一个line-box中，它的line-height是行高最高的inline box（在我看来，它的inline-element或inline-block元素）的line-height。喜欢图片：

inline-block 元素一切正常，但似乎 inline-element 存在问题。

解释：

父级：height:200px, line-height;100px;

div.child:inline-block,vertical-align bottom;

span1: inline, line-height:继承自父级，即100px

span2: inline, line-height:inherit from parent, 100px, vertical align: bottom.

对我来说，下面代码的行框是这样的（你可以先运行代码）：

span2 的奇怪行为！！！如果我将它的垂直对齐设置为 text-top 或 text-bottom，它会变得更加奇怪

我发现有趣的另一件事是，如果我将 span 的显示设置为 inline 块或将 span 的 line-height 设置为正常（这是其字体大小的 1.16），一切正常。

谁能解释一下？谢谢

div.parent {
  width: 300px;
  background-color: coral;
  /*key-part*/
  height: 200px;
  line-height: 100px;
}

div.child {
  width: 50px;
  height: 50px;
  background-color: yellow;
  /*key-part*/
  display: inline-block;
  vertical-align: bottom;
  line-height: normal;
}

.span1 {
  background-color: white;
   font-size: 50px;
  /*key-part*/
  vertical-align: middle;
}

.span2 {
  background-color: green;
  font-size: 12px;
  /*key-part*/
  vertical-align: top;
}

<body>
  <div class="parent">
    <div class="child">inline-block div</div>
    <span class="span1">Text1</span>
    <span class="span2">Text2</span>
  </div>
</body>

【问题讨论】：

答案没有提到的一个问题是“将 span 的 line-height 设置为正常（其字体大小的 1.16）”，这并不总是正确的。根据MDN，大多数浏览器采用大约 1.2 的字体大小，然后将其四舍五入到整个像素，但这取决于字体。

标签： html css

【解决方案1】：

让我们一步一步地覆盖它：

1.vertical-align 仅适用于 inline/inline-block 元素

垂直对齐适用于行内元素。目前是：inline、inline-block、inline-table、inline-flex、inline-grid。垂直对齐也用于表格单元格，但方式不同。

2.vertical-align 是基于 line-height，而不是容器的高度！

除了表格单元格，正确。

3.在一个line-box中，它的line-height是行高最高的inline box的line-height（在我看来，它要么是inline-element，要么是inline-block元素）。

这适用于简单的情况，但不适用于复杂的对齐情况。更好的近似是这样的。删除所有垂直对齐：顶部和垂直对齐：底部的元素。对齐所有其他元素，使它们的垂直对齐线彼此水平。从对齐元素的最高顶部到对齐元素的最低底部，将包含它们的框称为原型线框。那么线框的实际高度就是原型线框的高度和上下对齐的所有元素的高度中的最大值。

现在你的问题规范的相关部分是这样的：

... 对于内联非替换元素，用于对齐的框是高度为“行高”的框（包含框的字形和每边的半前导，见上文）。对于所有其他元素，用于对齐的框是边距框。

所以对于 span2，绿色背景区域是盒子的字形，其上方是每个字形的上半部前导，该值取自从容器块元素继承的 100px 行高。与行框顶部对齐的是这些半行距的顶部，而不是绿色背景区域的顶部。

另一方面，inline-block div 与行框的底部对齐，对齐到其底部边距的底部，而不是任何半前导。

【讨论】：

感谢您的回答，也许我需要多读一些东西，现在仍然很难理解您所说的。不过还是谢谢你们！