div
コンテナー内に2 つの s があり、両方ともdisplay:inline-block
同じ高さに設定されています。両者の唯一の違いはフォントサイズです。それらの高さは同じ値に設定されているため、同じ高さでページの最上部からあると予想されますが、そうではありません (上から少しオフセットされています)。
これはなぜですか?また、両方を同じ高さにし、上からのオフセットを 0 にするにはどうすればよいですか?
div
コンテナー内に2 つの s があり、両方ともdisplay:inline-block
同じ高さに設定されています。両者の唯一の違いはフォントサイズです。それらの高さは同じ値に設定されているため、同じ高さでページの最上部からあると予想されますが、そうではありません (上から少しオフセットされています)。
これはなぜですか?また、両方を同じ高さにし、上からのオフセットを 0 にするにはどうすればよいですか?
のデフォルト値inline-block
はベースラインです。vertical-align:top
DIV で定義します。次のように書きます。
div{
display:inline-block;
vertical-align:top
}
これをチェックしてくださいhttp://jsfiddle.net/tWrHd/2/
詳しくはこちらをお読みください
vertical-align: text-top;
おそらく、これらの両方にorvertical-align: top;
プロパティを追加すると役立つでしょうか?