WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > line-height
line-height    文章整形 

行の高さを指定する。

このエントリーをはてなブックマークに追加

行の高さが指定する際に使用します。

行サイズとフォントサイズ

line-height:20px;font-size:12px; の場合、差引した8pxを上下均等に分けた4pxが余白となります。

行サイズよりフォントが大きい場合

line-height:10px;font-size:14px の場合、文章が重なって表示されてしまいます。

パラメーター

normal …ブラウザ自動(初期値)。
数値+単位で指定 …(例) 10px や12pt など。
数値で指定 …(例)1.5 の場合は 150%です。
%で指定 …(例)180% など。

サンプルコード

<p style="line-height:normal;">通常:ああああああああ<br />いいいいいいいい</p>
<p style="line-height:150%;">150%:ああああああああ<br />いいいいいいいい</p>
<p style="line-height:10px;">10px:ああああああああ<br />いいいいいいいい</p>
<p style="line-height:2.5em;">2.5em:ああああああああ<br />いいいいいいいい</p>

通常:ああああああああ
いいいいいいいい


150%:ああああああああ
いいいいいいいい


10px:ああああああああ
いいいいいいいい


2.5em:ああああああああ
いいいいいいいい