padding：要素の内側の余白をまとめて指定する

paddingプロパティの説明

paddingは、要素の内側の余白をまとめて指定します。具体的には、CSSのボックス・モデルにおけるパディング・ボックス（Padding box）の寸法を定義するものです。

要素を配置すると、そこに四角形のボックスが生成されます。paddingは、その四辺全ての内側に作成される余白を一括で制御できるショートハンド・プロパティです。各値は共通の寸法を指定することも、個別に指定することも可能です。その祭、記述する値の数によって対応する辺の位置が決まります。

• 値を1つ指定した場合は、4つの辺全てに同じパディングが適用される
• 値を2つ指定した場合は、1つ目の値が上下、2つ目の値が左右に適用される
• 値を3つ指定した場合は、1つ目の値が上、2つ目の値が左右、3つ目の値が下に適用される
• 値を4つ指定した場合は、1つ目の値が上、2つ目の値が右、3つ目の値が下、4つ目の値が左に適用される

負の値は無効です。各辺の値を個別に指定する場合は、以下のプロパティを使用して下さい。

• 上辺のパディング：padding-top
• 右辺のパディング：padding-right
• 下辺のパディング：padding-bottom
• 左辺のパディング：padding-left

CSSのパディングについて正しく理解したい方は、余白に関するリファレンスを参照して下さい。

パディングによって要素の幅や高さが膨張する理由

要素にpaddingを指定する場合は、box-sizingの仕様をよく理解しておきましょう。この値によって、パディングの専有範囲が外側に向かって拡張するのか、内側に向かって拡張するのかが決まります。

既定値では、widthやheightによるサイズ指定は、ボックスのコンテンツ・エリアに適用されます。そのため、内容が収まる範囲の外側に生成される余白や境界線は、外側に向かって拡張します。これが原因となって要素の幅や高さが膨張して見えるのです。

paddingに指定できる値

<length>

CSSで使用できる長さを表す単位つきの値です。ピクセル値やメートル法の単位などを使う絶対値、フォントサイズやビューポートなどを使用する相対値が指定できます。

<percentage>

パディングの寸法を包含ブロックの幅（width）を基準に割合（%）で表します。

paddingの使い方とサンプル

paddingプロパティの構文は以下の通りです。

/* 四辺共通 */
padding: 10px;
padding: 1rem;
padding: 5%;

/* 上下 | 左右 */
padding: 10px 5%;
padding: 0.5rem 3vmax;

/* 上 | 左右 | 下 */
padding: 1rem 5% 10px;
padding: 10px 1rem 5vmin;

/* 上 | 右 | 下 | 左 */
padding: 10px 24px 0 0.5rem;
padding: 1rem 5% 10px 0;

/* グローバル値 */
padding: inherit;
padding: initial;
padding: revert;
padding: unset;

paddingの実例

それでは実際にpaddingプロパティの書き方を見ていきましょう。以下の例は、同じ内容を含む要素に異なるパディングの値を指定した場合の比較です。box-sizingの値はborder-boxに変更しています。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box > div {
	margin-top: 1rem;
	background-color: #fff;
}
div > h2 {
	margin: 0;
	padding: 0;
	font-size: 1rem;
}
div > p {
	margin: 0;
	padding: 0;
}
#pad_1 {
	padding: 0;
}
#pad_2 {
	padding: 10px;
}
#pad_3 {
	padding: 10px 3rem;
}
#pad_4 {
	padding: 10px 3rem 10%;
}
#pad_5 {
	padding: 10px 3rem 10% 0;
}

<section class="samp_box">
	<div id="pad_1">
		<h2>padding: 0;</h2>
		<p>Text text text text text text. Text text text text text text. Text text text text text text. Text text text text text text.</p>
	</div>
	<div id="pad_2">
		<h2>padding: 10px;</h2>
		<p>Text text text text text text. Text text text text text text. Text text text text text text. Text text text text text text.</p>
	</div>
	<div id="pad_3">
		<h2>padding: 10px 3rem;</h2>
		<p>Text text text text text text. Text text text text text text. Text text text text text text. Text text text text text text.</p>
	</div>
	<div id="pad_4">
		<h2>padding: 10px 3rem 10%;</h2>
		<p>Text text text text text text. Text text text text text text. Text text text text text text. Text text text text text text.</p>
	</div>
	<div id="pad_5">
		<h2>padding: 10px 3rem 10% 0;</h2>
		<p>Text text text text text text. Text text text text text text. Text text text text text text. Text text text text text text.</p>
	</div>
</section>