垂直居中，线高

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可能会有所不同。