Die Position der Grundlinie des Zeilenfelds wird von allen Elementen in der Zeile beeinflusst.
.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>
Warum das erste Kästchen und das dritte Kästchen die gleiche Wirkung haben, das zweite Kästchen und das vierte Kästchen jedoch unterschiedliche Wirkungen haben. Wie verändert die vertikale Ausrichtungseigenschaft die Grundlinie eines Linienrahmens?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
简而言之，因为短框突出于父内容框上方，但不突出于父内容框下方。
这是添加了相关框和线条的图像：
在每种情况下，绿色矩形显示行框所在位置，蓝色矩形显示父内容框所在位置，红线显示基线所在位置。
现在我们可以看到，在情况一和情况三中，高框分别与
text-bottom和bottom对齐，父内容框的底部和行框的底部重合。因此，每个的对齐都解析为相同的排列。在情况二和情况四中，高框分别与
text-top和top对齐，父内容框的顶部和行框的顶部不重合，因此它们的布局不相同。 p>