图片vertical-align设置top和bottom，x的位置为何这样移动？
在总结行内格式化的知识
关于行盒内vertical-align垂直对齐碰到了一个问题，上代码
<style>
.line-box{
width: 500px;
position: relative;
border: 2px solid #03A9F4;
}
.line{
top: 200px;
height: 1px;
width: 500px;
background-color: black;
position: absolute;
}
.line-box::after {
content: 'x';
}
span:first-of-type{
padding: 0 20px;
background-color: pink;
}
span:nth-of-type(2),span:nth-of-type(3){
display: inline-block;
width: 100px;
height: 100px;
background-color:red;
}
span:nth-child(3){
margin-top: 20px;
}
span:nth-child(2),span:nth-child(3){
vertical-align: top;
}
span:nth-child(4){
margin-bottom: 20px;
vertical-align: bottom;
}
img{
vertical-align: bottom;
}
</style><body>
<div class="line-box">
<div class="line"></div>
<span>x</span>
<span></span>
<span></span>
<img src="images/20.PNG" alt="">
</div>
</body>
.line是测试时加的辅助线，这里没改定位位移，问题解决了再改
当我把img设置的bottom改为top时：
想不通为何插入的伪元素会跑上去？
思否有一篇名为 “[翻译]关于Vertical-Align你需要知道的事情”的文章，里面有一样的问题
zickson回答说：“最高元素vertical-align变成别的了，父元素文本对象自然也要回归原本位置：从line box顶端距文本中线一半行高的位置。”
如此，bottom时伪元素x为何在下面,这就是它原本位置？
另外一篇提问设置vertical-align后baseline改变位置
残阳映枫红答主说“行盒基线本身从来没有改变过, 只是我这个例子里面是img把这个行盒的上(或)下撑高了, 所以基线的位置在行盒内部相对地发生了变化”
如此，img把行盒向上撑，基线就在行盒内部上端x的下边缘了？
这道理对我来说不是很道理啊
有点抓狂，还是没搞明白，为何设置top是第二张图效果，bottom是第一张效果？
望各位不吝赐教，拜谢了拜谢了拜谢了！！！
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论