【CSS】line-heightプロパティ・paddingプロパティについて

こんにちは。駆け出しエンジニアの竹前です。

ここでは、line-heightプロパティ・paddingプロパティについて説明します。

CSSについて勉強している方の参考になれば幸いです。

line-heightとは

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

行の高さを設定することにより、行間の余白を変更することができます。

paddingとは

paddingプロパティは、パディングの広さを設定するプロパティです。

パディングの広さを設定することにより、border内の余白を設定することができます。

line-heightとpaddingの違い

line-heightプロパティとpaddingプロパティは、余白を設定するという点は同じですが、扱う領域が異なります。

line-heightプロパティはテキスト部分(要素の内容を表示させる領域内)の行間を設定します。

それに対し、paddingはパディング部分(要素の内容を表示させる領域の外)の余白を設定します。

line-heightの書き方

基本的な書き方は、以下の通りです。

line-height: 値;

line-heightの値について

行の高さはフォントサイズ + 上下の余白で表します。

上下の余白は、均等の値になります。

フォントサイズの指定については、以下の記事をご覧ください。

【HTML/CSS】フォント種類・フォントサイズ指定について

line-heightプロパティで指定できる値は、以下のものがあります。

1. normal

フォントサイズに従って、ブラウザが自動的に行の高さを設定します。これがデフォルト値です。

2. 数値+単位で指定

数値に単位をつけて指定する場合、以下のような単位を指定します。

px

px(ピクセル)を基準に指定する方法です。

例えば、フォントサイズ16pxに対し、line-heightの値を20pxに設定した場合、上下の余白は2pxずつ設定されます。

%

要素のフォントサイズに対する割合を指定する方法です。

例えば、フォントサイズ16pxに対し、line-heightの値を150%に設定した場合、行の高さは24pxとなります。

そのうち、フォントサイズは16pxであるため、上下の余白は4pxずつ設定されます。

em

%と同様、要素のフォントサイズに対する割合を指定する方法です。1emで100%です。

例えば、フォントサイズ16pxに対し、line-heightの値を1.5emに設定した場合、行の高さは24pxとなります。

そのうち、フォントサイズは16pxであるため、上下の余白は4pxずつ設定されます。

3. 数値のみ

要素のフォントサイズに、指定した数値をかけた値が行の高さになります。

例えば、フォントサイズ16pxに対し、line-heightの値を2に設定した場合、行の高さは32pxとなります。

そのうち、フォントサイズは16pxであるため、上下の余白は8pxずつ設定されます。

.test1 {
	font-size: 16px;
	line-height: 20px;	/* 余白は上下2pxずつ */
}
.test2 {
	font-size: 16px;
	line-height: 1.5em;	/* 余白は上下4pxずつ */
}
.test3 {
	font-size: 16px;
	line-height: 2;		/* 余白は上下8pxずつ */
}

paddingの書き方

基本的な書き方は、以下の通りです。

padding: 値;

値の代表的な指定方法は、次のようなものがあります。

• px：px(ピクセル)を基準に指定する方法です。
• %：親要素のボックス領域の幅に対する割合を指定する方法です。

また、値はスペース区切りで複数指定することができます。その場合、値の数によって適用される範囲が異なります。

• 値1つ:全方向に同じ値が設定されます。
• 値2つ:先頭の値は上下、2つ目の値は左右に設定されます。
• 値3つ:先頭の値は上方向、2つ目の値は左右、3つ目の値は下方向に設定されます。
• 値4つ:先頭の値は上方向、2つ目の値は右方向、3つ目の値は下方向、4つ目の値は左方向に設定されます。

.test1 {
	padding:5%;		/* 全方向5% */
}
.test2 {
	padding:10% 10px 12px 15%;		/* 上10% 右10px 下12px 左15% */
}

パディングは、個別に設定する方法もあります。

padding-top: 値;		/* 上方向 */
padding-right: 値;		/* 右方向 */
padding-bottom: 値;		/* 下方向 */
padding-left: 値;		/* 左方向 */

サンプルコードは以下の通りです。

.test1 {
	padding-top:10%;		/* 上方向10% */
	padding-right:10px;		/* 右方向10px */
}
.test2 {
	padding-bottom:12px;	/* 下方向12px */
	padding-left:15%;		/* 左方向15% */
}