HTML & CSS

リファレンス

CSS

ライン ハイト

line-heightプロパティ

行の高さを指定するプロパティです。

  • 初期値

    normal

  • 継承

    継承あり

  • 適用できる要素

    全要素

次のような値を設定することができます。

  • normal – 初期値。フォントサイズで自動的に高さを調整されます。
  • none – 親要素のフォントサイズで自動的に高さを調整されます。
  • 数値 + 単位 – 任意の数値と単位「px」や「em」で高さを指定します。
  • 数値 – 数値のみの場合(単位なし)、フォントサイズに数値をかけた高さとなります。
  • 値 + % – フォントサイズの割合に対して、高さを指定します。

パターン1

normal」を指定した例です。

CSSコード例

.sample_css1 .text1 {
	line-height: normal;
}

表示例:

行の高さを見るための
サンプルテキスト


パターン2

none」を指定した例です。

CSSコード例

.sample_css2 .text1 {
	line-height: none;
}

表示例:

行の高さを見るための
サンプルテキスト


パターン3

数値 + 単位で指定した例です。

CSSコード例

.sample_css3 .text1 {
	line-height: 10px;
}
.sample_css3 .text2 {
	line-height: 20px;
}
.sample_css3 .text3 {
	line-height: 1.0em;
}
.sample_css3 .text4 {
	line-height: 2.0em;
}

表示例:

「10px」を指定した
行の高さサンプル

「20px」を指定した
行の高さサンプル

「1.0em」を指定した
行の高さサンプル

「2.0em」を指定した
行の高さサンプル


パターン4

行の高さを「%」で指定した例です。

CSSコード例

.sample_css4 .text1 {
	line-height: 120%;
}
.sample_css4 .text2 {
	line-height: 180%;
}
.sample_css4 .text3 {
	line-height: 250%;
}

表示例:

「120%」を指定した
行の高さサンプル

「180%」を指定した
行の高さサンプル

「250%」を指定した
行の高さサンプル

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。