html - 行の高さによる垂直センタリング

Question

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

span にが指定されている場合のみvertical-align:middle、上記の html は以下とは異なる結果を生成します。

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

chrome と firefox では 1 ピクセル、ie8 では 2 ピクセル下に配置されます。

なぜ違うのですか？

score 0 · Accepted Answer

SPAN 要素と DIV 要素の主な違いは、SPAN が独自の書式設定を行わないことです。DIV 要素には段落区切りが含まれます。SPAN 要素は、SPAN 内にあるものすべてにスタイルルールを適用するようブラウザに指示するだけです。

そして、divのフォーマットが少し異なるため、違いが生じる可能性があると考えています。

2 に答える 2