行框基線的位置受該行中所有元素的影響。
.short-box {
width: 30px;
height: 30px;
background-color: pink;
display: inline-block;
}
.box {
background-color: bisque;
margin-bottom: 10px;
}
.tall-box {
width: 30px;
height: 100px;
background-color: pink;
display: inline-block;
}
.text-bottom {
vertical-align: text-bottom;
}
.text-top {
vertical-align: text-top;
}
.bottom {
vertical-align: bottom;
}
.top {
vertical-align: top;
}
<body>
<div class="box">
x
<span class="tall-box text-bottom"></span>
<span class="short-box"></span>
</div>
<div class="box">
x
<span class="tall-box text-top"></span>
<span class="short-box"></span>
</div>
<div class="box">
x
<span class="tall-box bottom"></span>
<span class="short-box"></span>
</div>
<div class="box">
x
<span class="tall-box top"></span>
<span class="short-box"></span>
</div>
</body>
</html>
為什麼第一個框和第三個框的效果是一樣的，而第二個框和第四個框的效果卻不同。垂直對齊屬性如何改變行框的基線？
簡而言之，因為短框突出於父內容框上方，但不突出於父內容框下方。
這是添加了相關框和線條的圖像：
在每種情況下，綠色矩形顯示行框所在位置，藍色矩形顯示父內容框所在位置，紅線顯示基線所在位置。
現在我們可以看到，在情況一和情況三中，高框分別與
text-bottom和bottom對齊，父內容框的底部和行框的底部重合。因此，每個的對齊都解析為相同的排列。在情況二和情況四中，高框分別與
text-top和top對齊，父內容框的頂部和行框的頂部不重合，因此它們的佈局不相同。 p>