行框基线的位置受该行中所有元素的影响。
.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>
为什么第一个框和第三个框的效果是一样的，而第二个框和第四个框的效果却不同。垂直对齐属性如何改变行框的基线？
P粉6747571142024-04-03 00:32:45
简而言之，因为短框突出于父内容框上方，但不突出于父内容框下方。
这是添加了相关框和线条的图像：
在每种情况下，绿色矩形显示行框所在位置，蓝色矩形显示父内容框所在位置，红线显示基线所在位置。
现在我们可以看到，在情况一和情况三中，高框分别与 text-bottom 和 bottom 对齐，父内容框的底部和行框的底部重合。因此，每个的对齐都解析为相同的排列。
在情况二和情况四中，高框分别与 text-top 和 top 对齐，父内容框的顶部和行框的顶部不重合，因此它们的布局不相同。