最終更新日

line-heightプロパティ

line-heightは、行の高さを指定するプロパティです。

例えば、line-heightが1.2emで、font-sizeが10pxの場合、12pxから10pxを引いた残りの2pxが、上下均等に1pxずつ、行間として割り振られます。

また、例えばline-heightが0.8emで、font-sizeが10pxのように、行の高さがフォントサイズより小さい場合は、上下の文字が重なって表示されてしまいます。

なお、line-heightをフォント関連プロパティとまとめて指定する場合は、fontを使用します。

CSS3での変更点
特にありません
初期値 適用先 継承
normal すべての要素 あり
説明
normal 通常の行の高さ(初期値
数値 単位をつけずに数値のみを指定すると、その数値にフォントサイズを掛けた値が、行の高さとなります。「1.2」と指定した場合、「120%」や「1.2em」と指定した場合と同じになります。
長さの値 数値に「px」「em」「ex」などの単位をつけて指定します。
パーセント値 数値に「%」を付けて指定します。
none 親ブロック要素のfont-sizeの値
サンプルコード
line-height: normal;
line-height: 1.2;
line-height: 1.2em;
line-height: 120%;
line-height: none;
参考文献:CSS3 module: line外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。