line-heightプロパティ

値

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

• 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;
}

表示例：

パターン4

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

CSSコード例

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

表示例：

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

コメントありがとうございます！
運営の参考にさせていただきます。