The baseline positioning of a line box is impacted by all elements within that line.
.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>
https://i.sstatic.net/bOmin.png
What causes the first and third boxes to have similar effects, while the second and fourth boxes differ? How does the vertical align attribute alter the line box's baseline?