Question

vertical-align：bottom，表示底部的内联框与其行框的底部相匹配，所以在我的例子中，span2的内联框是绿色的，其行高为100px，继承自它的家长。它的线盒是黑色的，也有行高：100px。所以它们是底部对齐的。见图：

我已经了解到：

1.vertical-align仅适用于内联/内联块元素

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

3.在一个行框中，它的行高是内联框的行高（在我看来，它是内联元素或内联块元素），它具有最高的行高。像pic：

在内联块元素上一切正常，但似乎内联元素存在问题。

解释

父级：身高：200px，行高; 100px;

div.child：inline-block，vertical-align bottom;

span1：inline，line-height：从父级继承，即100px

span2：inline，line-height：从父级继承，为100px，垂直对齐：底部。

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

span2的奇怪行为！如果我将vertical-align设置为text-top或text-bottom

，那就变得更加奇怪了

我觉得有趣的另一件事是，如果我将span的显示设置为内联块或将span的行高设置为normal（其字体大小为1.16），一切正常。

有人可以解释一下吗？感谢

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

让我们一步一步地介绍它：

1.vertical-align仅适用于内联/内联块元素

垂直对齐适用于内联级元素。目前的情况是：内联，内联块，内联表，内联 - 灵活，内联网格。也使用垂直对齐，但以不同的方式，对于表格单元格。

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

除表格单元格外，请更正。

3.在一个行框中，它的行高是内联框的行高（在我看来，它是内联元素或内联块元素），它具有最高的行高。

对于简单的情况，这是正确的，但对于复杂的对齐情况则不然。更好的近似就是这样的。删除所有垂直对齐的元素：top和vertical-align：bottom。对齐所有其他元素，使其垂直对齐线彼此齐平。从对齐元素的最高顶部调用包含它们的框到原始行框的对齐元素的最低底部。然后，线框的实际高度是原型线框的高度的最大值以及顶部和底部对齐的元素的所有高度。

现在，问题规范的相关部分是：

...对于内联的非替换元素，用于对齐的框是高度为＆＃39; line-height＆＃39; （包含方框的字形和每边的半个前导，见上文）。对于所有其他元素，用于对齐的框是边距框。

因此，对于span2，绿色背景区域是方框的字形，上面是每个字形的上半部分，这是从容器继承的100px行高取得的值块元素。它是这些半导体的顶部，与线框的顶部对齐，而不是绿色背景区域的顶部。

另一方面，内联块div与线框的底部对齐，位于底部边距的底部，而不是任何半边距。

了解内联元素，垂直对齐，线框和行高

1 个答案: