The position of the line box baseline is affected by all elements in the 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>
Why the effects of the first box and the third box are the same, but the effects of the second box and the fourth box are different. How does the vertical alignment property change the baseline of a line box?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
In short, because the short box protrudes above the parent content box, but does not protrude below the parent content box.
Here is the image with the relevant boxes and lines added:
In each case, the green rectangle shows where the line box is, the blue rectangle shows where the parent content box is, and the red line shows where the baseline is.
Now we can see that in case one and three, the tall box is aligned with
text-bottomandbottomrespectively, the bottom of the parent content box and the bottom of the line box coincide. Therefore, the alignment of each resolves to the same arrangement.In case two and four, the tall box is aligned with
text-topandtoprespectively. The top of the parent content box and the top of the line box do not coincide, so their The layout is not the same. p>