目次 [ close ]
  1. はじめに
  2. marginとpaddingの違いは「外側」か「内側」か
  3. paddingの使い方（内側の余白）
  4. marginの使い方（外側の余白）
  5. 上下左右を個別に指定する
  6. 初心者がつまずくポイント
  7. 実務での選び方：「背景・枠線・クリック範囲」で決める
  8. 今どきの余白管理：gapで相殺問題を回避する
  9. まとめ

はじめに

CSSで余白を調整しようとすると必ず出てくる margin と padding。「どちらも余白なのに何が違うの？」「思った場所に余白ができない…」と悩みますよね。この記事では、2つの違いをコード付きで解説します。ボックスモデルの考え方がわかれば、レイアウトの余白でもう迷いません！

marginとpaddingの違いは「外側」か「内側」か

  • margin＝要素の外側の余白（他の要素との間隔）
  • padding＝要素の内側の余白（枠線と中身の間隔）

要素は「中身 → padding → 枠線 → margin」という層でできています。これをボックスモデルと呼びます。

paddingの使い方（内側の余白）

.box {
  background: #e0f7fa;
  padding: 20px; /* 背景の内側に余白ができる */
}

背景色や枠線の内側にゆとりが生まれます。ボタンの中の余白などはこれです。

marginの使い方（外側の余白）

.box {
  margin: 20px; /* 隣の要素との間隔が空く */
}

上下左右を個別に指定する

/* 上→右→下→左 の時計回り */
.box { margin: 10px 20px 30px 40px; }

/* 値2つなら「上下・左右」 */
.box { padding: 10px 20px; }

初心者がつまずくポイント

  • ❌ paddingを足したら要素が大きくなった → box-sizing: border-box; を指定すると、paddingを含めた幅で計算され、ズレなくなります
* { box-sizing: border-box; }
  • ❌ 上下のmarginが重なって思ったより狭い → これは「margin相殺」という仕様。片方だけで指定すると安定します

実務での選び方：「背景・枠線・クリック範囲」で決める

marginとpaddingで迷ったら、私は「背景色や枠線を一緒に広げたいか」で判断しています。

  • padding：背景色や枠線の内側に余白ができる → ボタンの「文字まわりのゆとり」に最適
  • margin：背景の外側の透明な距離 → 要素どうしの「間隔」に最適

とくにボタンは、paddingでクリック範囲ごと広げると指でタップしやすくなるので、スマホのアクセシビリティ的にもおすすめです。

今どきの余白管理：gapで相殺問題を回避する

記事内で触れた「margin相殺」は地味に厄介ですが、FlexboxやGridのgapを使えば、そもそも悩まずに済みます。

.list {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 子要素の間隔を一括指定。相殺もズレも起きない */
}

「要素を等間隔に並べたい」ときは、子要素にmarginを振るよりgapのほうが断然ラクです。私も最近は縦並びの間隔をほぼgapで管理しています。

まとめ

  • margin＝外側、padding＝内側
  • ショートハンドは時計回り（上右下左）
  • サイズがズレたら box-sizing: border-box;

余白の調整はWeb制作の基本にして奥が深い部分です。制作で詰まったら、ポートフォリオやココナラものぞいてみてくださいね。