marginとpaddingの使い分け ― 余白で迷わないためのCSS入門

marginとpaddingで迷うのは、とても自然です

「余白を空けたいだけなのに、marginなの？ paddingなの？」 ここ、最初は本当に混乱しますよね。 どちらも見た目には“すき間”を作るので、違いが見えにくいんです。

でも、一度イメージでつかめると急に楽になります。 私が初めてCSSを学んだときは、家にたとえて考えるようにしていました。 その考え方が、いまでもいちばんわかりやすいと思っています。

.box {
  margin: 24px;
  padding: 24px;
  background: #0d9488;
}

このコードだけ見ると、どちらも24pxなので同じに見えます。 でも、働いている場所が違います。 次で、家のイメージに置き換えてみましょう。

marginは家の外、paddingは家の中

要素を一軒の家だと考えてみます。 marginは、家と隣の家との距離。 つまり外側の余白です。 paddingは、家の壁と家具の間の距離。 つまり内側の余白です。

.house {
  margin: 32px;  /* 家の外側の距離 */
  padding: 24px; /* 家の中のゆとり */
}

斜線の外側が、まわりとの距離を作る領域。 緑色の中にある余白が、内容をゆったり見せる領域です。 こうして見ると、役割が少し分かれて見えてきませんか。

カードUIで使い分けてみましょう

Webサイトでよく使うカードUIを例にすると、使い分けがかなり見えやすくなります。 カードの中の文字をゆったり見せたいならpadding。 カード同士の距離を空けたいならmarginやgapです。

.card-wrap {
  display: grid;
  gap: 18px;
}

.card {
  padding: 24px;
  border-radius: 18px;
  background: white;
}

動きましたか？ おめでとうございます！ ここまでできたなら、余白の基本はかなりつかめています。 カードの内側に余白があるだけで、デザインがぐっとやさしく見えますね。

最初にやりがちな余白の迷子

初学者の頃は、とりあえずmarginを足して調整したくなります。 私も最初はそうでした。 でも、全部をmarginで整えようとすると、どの余白が何のためにあるのか分からなくなりやすいです。

.card {
  margin: 24px;
  background: white;
}

.card-title {
  margin-left: 20px;
}

.card-text {
  margin-left: 20px;
  margin-right: 20px;
}

もちろん、これは間違いというより「最初に通りやすい道」です。 ただ、カードの中身をまとめて内側に入れたいなら、親要素にpaddingを付けるほうがシンプルです。

.card-list {
  display: grid;
  gap: 24px;
}

.card {
  padding: 24px;
  background: white;
}

迷ったときの判断ルール

最後に、手が止まったときのための判断ルールを置いておきます。 余白は感覚だけで決めると、あとから崩れやすくなります。 でも、問いかけをひとつ挟むだけで選びやすくなります。

/* 中身を端から離したい？ */
.box {
  padding: 24px;
}

/* ほかの要素と距離を取りたい？ */
.box {
  margin-bottom: 32px;
}

/* 並んだ要素の間隔をそろえたい？ */
.list {
  display: grid;
  gap: 16px;
}

「中身のための余白かな？」 それとも「外との関係を作る余白かな？」 この2つだけで、かなり判断しやすくなります。

デザインでは、余白は空いているだけの場所ではありません。 読みやすさを作る場所。 視線を休ませる場所。 情報同士の関係を伝える場所です。 だからこそ、marginとpaddingを分けて考えることが大切なんです。