line-height 行の高さを指定する

スポンサーリンク

行の高さを指定する場合は、「line-height」を使用します。

インライン要素に対して「line-height」を指定した場合は、 その要素のボックスの高さを指定することになります。

ブロック要素に対して指定した場合は、 その要素にあるインライン要素の高さの最小値を指定することになります。

使用例


line-height: normal;
line-height: 15px;
line-height: 1.5;
line-height: 150%;

説明
normal 初期値。ブラウザが高さを自動的に設定します。
実数値+単位 実数値に単位を付ける。例)10px、1.5em
実数値 指定した要素のフォントサイズに対する相対的な数値。 例)フォントサイズが「10px」の場合、「1.5」と指定すると、行の高さは「15px」となります。
パーセンテージ+% 指定した要素のフォントサイズに対する相対的なパーセンテージ。 例)フォントサイズが「10px」の場合、「150%」と指定すると、行の高さは「15px」となります。

サンプル

line-heigthに値を設定して、表示してみます。

line-height: normal; (初期値)

この文章はダミーです。 文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

line-height: 1em;

この文章はダミーです。 文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

line-height: 1.5em;

この文章はダミーです。 文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

line-height: 200%;

この文章はダミーです。 文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト