为什么vertical-align:top无效？

Question

<div style="line-height: 240px;border: 1px solid black;font-size:180px">
  <span style="background-color: pink;font-size: 180px;">x</span>
  <span style="font-size: 100px;background-color: green;vertical-align: top;">x</span>
  <img src="123.jpg" style="background-color: red;vertical-align: top">
</div>

如图为什么第二个x不会顶部对齐？

Answer 1

因为有line-height吧,还有，字体本身有上下边距，其实你的现在已经是靠顶部对齐了，你可以试试把line-height去掉，然后给外面的容器加一个500px高