paddingプロパティ

paddingプロパティは要素の内側の上下左右に余白を設定するためのプロパティです。

paddingプロパティに指定できる値

paddingプロパティには次の形式で値を指定することができます。

値	内容
数値 + 単位	任意の単位（`px`、`em`）で余白を指定。
数値 + `%`	親要素に対する割合で余白を指定。

paddingプロパティで要素の内側の上下左右に対し均一に余白を取りたい場合は以下のように指定します。

.box1 {
	padding: 20px;
}

<p class="box1">要素</p>

ブラウザで表示してみると以下のようになります。
（表示例ではChromeを使用）

paddingプロパティに2つの値を指定した場合、1つ目の値は上下の余白の指定、2つ目の値は左右の余白の指定になります。
2つの値は半角スペースで区切って指定します。

.box2 {
	padding: 20px 40px;
}

<p class="box2">要素</p>

ブラウザで表示してみると以下のようになります。
（表示例ではChromeを使用）

3つの値を指定した場合、1つ目の値は上に対する指定、2つ目の値は左右に対する指定、3つ目の値は下への指定となります。

.box3 {
	padding: 20px 25px 50px;
}

<p class="box3">要素</p>

ブラウザで表示してみると以下のようになります。
（表示例ではChromeを使用）

4つの値を指定した場合、1つ目の値は上に対する指定、2つ目の値は右に対する指定、3つ目の値は下に対する指定、4つ目の値は左に対する指定となります。

.box4 {
	padding: 20px 40px 50px 30px;
}

<p class="box4">要素</p>

ブラウザで表示してみると以下のようになります。
（表示例ではChromeを使用）

paddingプロパティは一括指定以外にも、以下のように個別のプロパティから指定することもできます。

.box5 {
	padding-top: 10px;
	padding-bottom: 30px;
	padding-left: 20px;
	padding-right: 50px;
}

<p class="box5">要素</p>

ブラウザで表示してみると以下のようになります。
（表示例ではChromeを使用）