Question

vertical-align:top问题

aaa的line-height:40px，其他文本的line-height是20px。aaa的line-height最高了，那么行框也是40px。我给aaa设置vertical-align:top，结果aaa没有变化，其他文本的位置却发生变化了。
没有给aaa设置vertical-align:top

设置vertical-align:top

拜谢！
div {font-size:20px; line-height:20px; border:1px solid red; width:500px;}
span {background:lime; line-height:60px; vertical-align:top;}
<div>
one two three four <span>aaa</span> 一 二 三 四
</div>
应该是哪个元素设置vertical-align，哪个元素发生垂直位置变化吧。我没有给其他文本设置vertical-align，但他们却跑上边来了。





Answer 1

vertical-align:top的意思是：把元素的顶端与行中最高元素的顶端对齐，所以你定了line-height导致其他的元素向着aaa最高元素看齐了~~~

可以到w3cschool查看各个属性意思，这里都是讲解元素属性之类的，比较基础~~不懂的就来这里翻看下

追问

谢谢回答，可能是我没有说清楚问题，请看问题补充。

追答

这个就跟我说的一样了，本身默认是middle结果设置一个元素span的最高line-height:60px有设置top就诱发其他元素跟这个行内元素的顶端对齐了~~~

vertical-align:top其实这个属性真心不好用，一般更多在td表格设置才用到的说~~~

Answer 2