CSS margin と padding の違い

スタイルシート(CSS)では余白を作ることができますが、margin と padding という二種類の作り方があります。

余白自体は目に見えないため、その違いがわかりにくいです。そこで margin と padding の違いについて解説します。

余白を理解するには「ボックス」を知る必要があります。

例えば下のような見出しがあり、周囲に余白を作るとします。

スタイルシート(CSS)の background-color プロパティなどで背景色が塗られる範囲は、図の中で赤いストライプが塗られている範囲です。 border プロパティで周囲に罫線を引く場合も、この赤い範囲の周囲に引かれます。

罫線を引いて背景色を塗ると、擬似的に箱のように見えるので、この赤いストライプの範囲のことを「ボックス」と呼びます。

margin はボックスの外側に作られる余白です。
隣の要素との間隔になります。

padding はボックスの内側に作られる余白です。
ボックスの境界部分と、中身の要素（文字列など）との余白になります。

margin は字下げなどを行う際に設定すると良いでしょう。

ボックスの中に文字や画像を入れる場合は、padding で数ピクセル程度の余白を作っておくと良いでしょう。ボックスの境界と文字が密着していると読みにくいからです。

ボックスに対して border プロパティで罫線を引くなどした場合は、padding を設けておくと文字が読みやすくなります。実際に確認してみましょう。

例えば、下の例では CSSを使って、文字の周囲を枠線（border）で囲いました。
padding が無い状態の表示は、以下のようになります。

周囲の枠線と中の文字が密着しており読みにくい事がわかります。
CSS は以下のようになっています。

border:solid 2px #88aa88;  /* 周囲に枠線を描く */
background-color:#eeffdd;  /* 背景に色を設定 */
padding:0px;               /* 余白 ゼロ（0px） */

ここで、padding を追加してみます。
padding が 8ピクセル設けると、以下のようになります。

周囲の枠線と中の文字との間に適度な余白があり読みやすいことが分かります。
CSS は以下のようになっています。

border:solid 2px #88aa88;  /* 周囲に枠線を描く */
background-color:#eeffdd;  /* 背景に色を設定 */
padding:8px;               /* 余白 8ピクセル（8px） */

margin や padding を適切に活用して、分かりやすいデザインを実現しましょう。