行ボックスの高さ : css

投稿日 : 2008年6月12日 | 更新日 : 2011年06月16日前のページへ戻る

行ボックスの高さは基本的にline-heightプロパティで決まります。行ボックスに流し込まれる文字のフォントサイズがline-heightで指定したサイズより大きい場合は行ボックスからはみ出します。

<p style="line-height: 18px; font-size: 36px; background:#CCCCCC;">あいう</p>

※line-heightを相対設定(em,%など)にすれば、font-sizeに対する相対サイズになるので文字がはみ出すことはない。
»詳しくはタイポグラフィーとCSS : Typographyを参照。

あいう

画像などの置換要素の内在領域がline-heightを上回る場合は、行内ボックスの高さは置換要素の内在領域の高さに拡大される。

<p style="line-height: 18px; font-size: 36px; background:#CCCCCC;"><img src="exsample.gif" alt="行ボックスの高さを説明する画像" /> あいう</p>

行ボックスの高さを説明する画像あいう

コメントはまだありません。

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。

http://www.findxfine.com/programming/css/477.html/trackback