了解行内元素，垂直对齐，行框和行高 [英] Understand inline-element, vertical-align, line-box and line-height
问题描述
vertical-align：bottom，表示底部的内嵌框与其行框的底部匹配，因此在我的情况下，span2的内嵌框是绿色的，其行高为100px，继承自其父母它的线框是黑色的，也有line-height：100px。因此它们在底部对齐。
参见图片：
vertical-align:bottom, means the bottom inline-box matches the bottom of its line-box, so in my case, the inline-box of span2 is the green one, whose line-height is 100px, inherited from its parent. Its line-box is the black one, also has line-height:100px. so they are bottom aligned. see pic:
I已经了解到：
1.vertical-align仅适用于行内/行内块元素
1.vertical-align works only for inline/inline-block element
2.vertical-align是基于line-height，而不是其容器的高度！
2.vertical-align is based on line-height, not the height of its container!
3。在一个线盒中，它的line-height是line-内联框的高度（我认为是内联元素或内联块元素），具有最高的行高。像照片一样：
3.in a line-box, its line-height is the line-height of the inline box(in my opinion, its either inline-element or inline-block element) which has the highest line-height. like pic:
在inline-block元素上一切正常，但是inline-element似乎有问题。
Everything works fine on inline-block element, but it seems that there is a problem with inline-element.
说明：
父级：高度：200px，行高； 100px ;
parent: height:200px, line-height;100px;
div.child：内嵌块，垂直对齐底部；
div.child:inline-block, vertical-align bottom;
span1：内嵌，行-高度：从父代继承的像素，是100px
span1: inline, line-height:inherit from parent, which is 100px
span2：内联，行高：从父代继承的像素，是100px，垂直对齐：底部。
span2: inline, line-height:inherit from parent, which is 100px, vertical align: bottom.
对我来说，以下代码的行框是这样的（您可以先运行代码）：
To me, the line-box for the code below is like this(you can run the code first):
span2的奇怪行为！！！如果我将它的vertical-align设置为text-top或text-bottom
我发现有趣的另一件事是：显示跨度到行内块或将跨度的行高设置为正常（其字体大小为1.16），一切正常。
another thing which I found interesting is, if I set display of span to inline block or set the line-height of span to normal (which is 1.16 of its font-size), everything works fine.
有人可以解释吗？谢谢
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>
推荐答案
让我们逐步介绍它：
1.vertical-align仅适用于内联/内联-块元素
1.vertical-align works only for inline/inline-block element
垂直对齐适用于内联级元素。当前是：内联，内联阻止，内联表，内联Flex，内联网格。垂直对齐方式也用于表单元格。
Vertical-align applies to inline-level elements. That's currently: inline, inline-block, inline-table, inline-flex, inline-grid. Vertical-align is also used, but in a different way, for table cells.
2.vertical-align基于行高，而不是其容器的高度！
2.vertical-align is based on line-height, not the height of its container!
除了表格单元格之外，都是正确的。
Except for table cells, correct.
3。在一个线盒中，它的line-height是内联盒的行高（在我看来，它是inline-element或inline-block元素）具有最高行高。
3.in a line-box, its line-height is the line-height of the inline box(in my opinion, its either inline-element or inline-block element) which has the highest line-height.
对于简单的情况是正确的，但对于复杂的对齐方式则不是。更好的近似是这样的。删除所有vertical-align：top和vertical-align：bottom的元素。对齐所有其他元素，使它们的垂直对齐线彼此齐平。从对齐元素的最高顶部到对齐元素的最低底部的包含它们的框称为原型框。这样，线框的实际高度就是原型线框的高度以及顶部和底部对齐的元素的所有高度的最大值。
That's correct for simple cases but not for complex alignment ones. A better approximation goes something like this. Remove all the elements that are vertical-align:top and vertical-align:bottom. Align all the other elements so that their vertical alignment lines are level with one another. Call the box that contains them from the highest top of the aligned elements to the lowest bottom of the aligned elements the proto-line box. The actual height of the line box is then the maximum of the height of the proto-line box and all of the heights of the elements that are aligned top and bottom.
现在，针对您的问题的说明的相关部分是：
Now the relevant part of the specification for your question is this:
...内联非替换元素，用于对齐的框是其高度为 line-height的框（包含框的字形和每侧的半前导号，请参见上文）。对于所有其他元素，用于对齐的框是边距框。
... for inline non-replaced elements, the box used for alignment is the box whose height is the 'line-height' (containing the box's glyphs and the half-leading on each side, see above). For all other elements, the box used for alignment is the margin box.
因此，对于span2，绿色背景区域是框的字形，上方是每个字形的上半部前导，其值是取自从容器块元素继承的100px行高。这是这些半引线的顶部，与行框的顶部对齐，而不是绿色背景区域的顶部。
So for the span2, the green background area is the box's glyphs and above that are each glyph's upper half-leading, a value which is taken from the 100px line-height inherited from the container block element. It's the top of these half-leadings that aligns with the top of the line-box, not the top of the green background area.
另一方面，内联-block div与行框的底部对齐，靠其底部边距的底部对齐，而不是任何半导数。
On the other hand, the inline-block div aligns to the bottom of the line box, by the bottom of its bottom margin, and not by any half-leading.
这篇关于了解行内元素，垂直对齐，行框和行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
