【CSS学習】CSSのpaddingとは？使い方・marginとの違いをわかりやすく完全解説！

Webサイトのデザインを整えるうえで欠かせない「余白」ですが、
その中でもよく使われるのが margin と padding の2つです。

両者は似ているようで役割がまったく異なります。
この記事では、CSSのpadding（パディング）について、基本から応用までをわかりやすく解説します。

paddingとは？

padding（パディング）は、要素の内側に余白を作るプロパティです。
つまり「文字や画像などのコンテンツ」と「ボックスの枠線（border）」との間にできるスペースを指します。

See the Pen Untitled by suguru (@suguru22) on CodePen.

上記の例では、テキストのまわりに20px分の内側の余白ができます。
ボックス全体のサイズも、padding分だけ大きくなる点に注意しましょう。

paddingは4方向（上・右・下・左）にそれぞれ指定できます。

4つの方向のpaddingをまとめて指定することもできます。

padding: 10px 20px 30px 40px;
/* 上 右 下 左 の順番 */

また、省略記法では指定数によって意味が変わります。

paddingにはさまざまな単位が使えます。
目的に応じて固定値や相対値を使い分けましょう。

デフォルトでは、CSSのbox-sizingがcontent-boxになっています。
この状態では、paddingを増やすとボックスの外側サイズ（実寸）が大きくなります。

.box {
  width: 200px;
  padding: 20px;
}

この場合、実際のボックス幅は
200px（content） + 20px（左） + 20px（右） = 240px になります。

* {
  box-sizing: border-box;
}

これを指定すると、paddingを増やしても外側サイズは変わらず、中身が圧縮されるようになります。
近年のCSS設計では、ほとんどのケースでこの指定が推奨されています。

比較項目	padding	margin
余白の位置	内側（内容と枠線の間）	外側（他の要素との間）
背景色の反映	背景が反映される	背景は反映されない
ボックスの大きさ	paddingを増やすとボックスが大きくなる	marginを増やしてもボックスサイズは変わらない
相殺（collapse）	なし	上下方向で相殺されることがある