垂直居中線高

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可能是不同的。