html - 使用 line-height 垂直居中

Question

<div style="line-height:100px; height:100px;">
    <span style="vertical-align:middle;">test</span>
</div>

只有vertical-align:middle在跨度中指定时，上面的 html 才会产生与下面不同的结果。

<div style="height:100px;">
    <span style="line-height:100px; vertical-align:middle;">test</span>
</div>

它在 chrome 和 firefox 上下降了 1px，在 ie8 上下降了 2px。

为什么不一样？

Answer 1

问题是 div 标签的默认border-width设置0px，然后查看更改。

Answer 2

SPAN 和 DIV 元素之间的主要区别在于 SPAN 不对其自己进行任何格式化。DIV 元素包括一个段落分隔符。SPAN 元素只是告诉浏览器将样式规则应用于 SPAN 中的任何内容。

而且我在想，由于 div 的一点点格式化可能会有所不同。