我是CSS的新手,最近在阅读规范并且在理解vertical-align属性方面遇到了一些问题。
<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px;"></span>
</div>
<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span>
</div>
<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px; vertical-align: bottom"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span>
</div>
上述代码创建了3个
- 在第一个中,一切看起来都很好。所有3个都与行框的基线对齐。
- 在第二个中,当我将第三个的
vertical-align
属性设置为top
时,前两个会向上移动。我不明白它们为什么会被移动,根据什么规则。 - 对我来说,第三个更加奇怪。我将第一个的
vertical-align
属性设置为bottom
,这导致第二个比第三个略微下降(当缩放足够大时会注意到这一点)。
规范中可以找到以下内容,但是多种解决方案
具体是什么?有人能详细说明吗?
如果它们对齐为“top”或“bottom”,则必须对齐以最小化行框高度。如果这些框足够高,则存在多个解决方案,CSS 2.1不定义行框基线的位置。
我还创建了一个演示。如果您感兴趣,请在Firefox或Chrome中运行它。