CSSのmarginとpaddingの違いとは?内側と外側の余白を解説

内側の余白(padding)と外側の余白(margin)の基本

まずは、内側の余白と外側の余白がそれぞれどこにある余白なのかを押さえましょう。

場所の違いが分かると、どちらを直せばよいかの判断がぐっと楽になります。

内側の余白(padding)とは

内側の余白とは、ボタンやカードのような「枠のある要素」の中で、中身(文字や画像)と枠のあいだにとる余白のことです。

CSS(Webページの見た目を指定する言語)では、この余白をpadding(パディング)というプロパティ(設定項目)で指定します。

内側の余白が足りないと、中身が枠に押しつけられたように見え、窮屈な印象になります。

次の見本は、同じボタンの内側の余白だけを変えたものです。

NGの見本では、文字と枠のあいだにほとんど余白がないため、ボタンというより色のついた文字のように見えます。

OKの見本のように内側の余白をとると、文字が落ち着き、ひとかたまりのボタンとして認識しやすくなります(ボタンのデザイン全体の考え方はCTAボタンの記事で解説しています)。

外側の余白(margin)とは

外側の余白とは、要素の枠の外側、つまり「要素と隣の要素のあいだ」にとる余白のことです。

CSSでは、この余白をmargin(マージン)というプロパティで指定します。

外側の余白が足りないと、別々の要素がくっついて1つに見えたり、押し間違えやすくなったりします(要素同士の距離で関係を伝える考え方は近接の原則とはで解説しています)。

次の見本は、ボタンの内側の余白はそのままで、ボタン同士の外側の余白だけを変えたものです。

NGの見本では2つのボタンが接しているため、どこからどこまでが1つのボタンなのかが分かりにくくなっています。

OKの見本のように外側の余白をとると、それぞれが独立したボタンだとひと目で分かります。

2つの見本を比べると、「ボタンが窮屈に見える」という同じような違和感でも、原因が内側の余白なのか外側の余白なのかで、直す場所がまったく違うことが分かります。

ボックスモデルで2つの余白の位置を確かめる

Webページでは、すべての要素が「箱(ボックス)」として扱われ、内側の余白と外側の余白はその箱の決まった位置にあります。

この箱の構造を「ボックスモデル」と呼び、中心から順に「中身(コンテンツ)」「内側の余白(padding)」「枠線(border)」「外側の余白(margin)」の4層でできています(MDN「ボックスモデル」)。

ボックスモデルの見本を見ると、内側の余白は枠線の内側に、外側の余白は枠線の外側にあることが分かります。

イメージしにくい場合は、宅配便の段ボール箱にたとえると分かりやすくなります。

中身(コンテンツ)は箱に入れた商品、内側の余白は商品が箱の壁にぶつからないように詰める緩衝材、枠線は段ボールの板、外側の余白はほかの箱とくっつかないように空けて置くすき間にあたります。

2つの余白の違いを表にまとめると、次のようになります。

比べるポイント	内側の余白(padding)	外側の余白(margin)
場所	枠線の内側(中身と枠のあいだ)	枠線の外側(要素と隣の要素のあいだ)
背景色	要素の背景色が塗られる	透明(背景色は塗られない)
主な役割	中身にゆとりを持たせ、要素自体を読みやすく見せる	要素同士を離し、関係の近さ・遠さを表す
デザインでの例	ボタンの文字と縁の距離、カードの中の文字と縁の距離	ボタン同士の距離、カード同士の距離、見出しと本文の距離
マイナスの値	使えない	使える(要素を隣に近づけたり重ねたりできる)

特に覚えておきたいのは、内側の余白には要素の背景色が塗られ、外側の余白は透明だという点です。

そのため、ボタンやカードを「ひと回り大きく見せたい」ときは内側の余白を、「隣から離したい」ときは外側の余白を調整します。

内側の余白と外側の余白の使い分け

ここからは、デザインを直すときやCSSを書くときに、2つの余白をどう使い分ければよいかを見ていきます。

「窮屈に見える」原因を内側か外側かで切り分ける

余白に違和感があるときは、まず「どの余白が原因か」を切り分けてから直すのが近道です。

原因を決めずに感覚で数値を変えると、別の場所の余白まで崩れてしまうことがあるためです。

よくある違和感と、直す余白の対応は次のとおりです。

よくある違和感	原因になりやすい余白	直し方の例
ボタンの文字が枠いっぱいで窮屈	内側の余白	ボタンの上下左右のpaddingを広げる
カードの文字が縁にくっついている	内側の余白	カードのpaddingを広げる
ボタン同士・カード同士がくっついて見える	外側の余白	要素同士のmarginを広げる
見出しが前の段落の続きに見える	外側の余白	見出しの上のmarginを広げる

ポイントは、「枠の中の問題か、枠と枠のあいだの問題か」を見ることです。

枠や背景色がない要素(見出しや本文の段落など)は、内側の余白の効果が目に見えにくいため、ほとんどの場合は外側の余白で間隔を調整します。

CSSでのpaddingとmarginの書き方

ここからは、コーディングする人向けの補足です。

デザインツールだけを使う人も、「エンジニアにはこう伝わる」と知っておくと、余白の指示を正確に伝えやすくなります。

paddingとmarginは、どちらも1〜4個の値をスペースで区切って書くことができ、値の数によって上下左右のどこに効くかが変わります(MDN「padding」、MDN「margin」)。

値の数	書き方の例	どこに効くか
1つ	padding: 16px;	上下左右すべて16px
2つ	padding: 12px 24px;	上下12px、左右24px
3つ	padding: 8px 16px 24px;	上8px、左右16px、下24px
4つ	padding: 8px 16px 24px 32px;	上8px、右16px、下24px、左32px(上から時計回り)

「上」「右」などの一辺だけを指定したいときは、padding-topやmargin-bottomのように、プロパティ名の後ろに方向をつけて書きます。

たとえば、ボタンの内側に上下12px・左右24pxの余白をとり、ボタンの下に16pxの外側の余白をとるCSSは次のようになります。

.button {
  padding: 12px 24px;   /* 内側の余白:上下12px・左右24px */
  margin-bottom: 16px;  /* 外側の余白:下に16px */
}

このCSSでは、paddingでボタン自体をふっくらさせ、margin-bottomで次の要素との距離をとっています。

なお、marginにはマイナスの値も指定できますが、paddingにマイナスの値は使えません。

デザインツールでは「パディング」と「間隔」で考える

デザインツールのFigmaでも、内側と外側の余白を区別して設定できます。

Figmaのオートレイアウト(中の要素を自動で並べ、余白を数値で管理できる機能)には、「パディング」と「間隔」という2つの余白の設定があります(Figma ヘルプセンター「オートレイアウトのガイド」)。

• パディング:枠(フレーム)の縁と、中の要素とのあいだの余白。
  CSSのpaddingにあたります。
• 間隔:枠の中に並んだ要素同士のあいだの距離。
  CSSでは、並んだ要素同士の隙間をまとめて指定するgap(ギャップ)というプロパティに近い考え方です。

gapは、横並びや格子状に並べた要素同士のあいだの隙間を指定するプロパティです(MDN「gap」)。

要素1つずつにmarginをつけなくても、並べる側でまとめて間隔を決められるため、要素同士の外側の余白をそろえたいときに便利です。

デザインを渡すときは、「この16pxはボタンの中の余白」「この24pxはカード同士の間隔」のように、どの余白なのかを言葉で添えると、実装でのずれを防げます。

実践のポイント

内側の余白と外側の余白を扱うときにつまずきやすい点と、よくある疑問をまとめます。

注意点・よくある間違い

• 「なんとなく詰まって見える」ときに、内側と外側のどちらが原因かを考えずに数値を変えてしまうことがあります。
  まずは「枠の中の問題か、枠と枠のあいだの問題か」を見極めましょう。
• 上下に並んだ要素で、上の要素のmargin-bottomと下の要素のmargin-topを両方指定しても、間隔は足し算になりません。
  縦に隣り合ったマージンは、大きいほうの値だけが使われる「マージンの相殺」という仕組みがあるためです(MDN「マージンの相殺の習得」)。
  たとえば下に32px、上に16pxを指定すると、間隔は48pxではなく32pxになります。
  なお、display: flexやdisplay: gridで並べた要素同士では、この相殺は起きません。
  思いどおりの間隔にしたいときは、要素同士の間隔は下側のmarginだけでとるなど、つける方向をそろえておくのが手軽な方法です(よくある質問でも説明しています)。
• width(幅)を指定した要素にpaddingを足したら、要素が思ったより大きくなってしまうことがあります。
  CSSの初期設定では、widthは中身の幅だけを表し、内側の余白と枠線はその外側に足されるためです。
  たとえばwidth: 100px;のボタンに左右20pxずつのpaddingをつけると、ボタン全体の幅は100+20+20=140pxになります(枠線があれば、その太さも足されます)。
  box-sizing: border-box;を指定すると、内側の余白と枠線を含めた大きさがwidthになり、計算しやすくなります(MDN「box-sizing」)。
  同じボタンなら、全体の幅は100pxのまま変わらず、そのぶん中身が入る幅が60pxに縮みます。

よくある質問

• Q. paddingとmargin、どちらを使えばいいか迷ったら?
  A. 「背景色や枠線の内側を広げたいか」で判断しましょう。
  ボタンやカードの色のついた部分ごと大きく見せたいならpadding、色のついた部分の大きさは変えずに隣との距離だけ空けたいならmarginです。
• Q. 要素同士の間隔をmarginでとるとき、上と下のどちらにつければいい?
  A. どちらでも間隔は作れますが、「下にだけつける」のように方向をそろえておくと管理しやすくなります。
  上下両方につけるとマージンの相殺が起きて、実際の間隔が分かりにくくなるためです。
• Q. gapとmarginは何が違う?
  A. marginは要素1つずつにつける外側の余白で、gapは並べる側(親の要素)で「並んだ要素同士のあいだ」をまとめて決める余白です。
  gapは要素のあいだにだけ入り、並びの端には入らないので、カードやボタンを同じ間隔で並べたいときに扱いやすいのが特徴です。

まとめ

内側の余白(padding)は枠の中で中身にゆとりを持たせる余白、外側の余白(margin)は要素と隣の要素のあいだをとる余白です。

余白に違和感があるときは、「枠の中の問題か、枠と枠のあいだの問題か」を切り分けてから直すと、狙いどおりに整えられます。

まずは身近なWebサイトのボタンやカードを1つ選び、「中身と枠の距離」と「隣の要素との距離」をそれぞれ観察してみてください(余白の学び方の全体像はデザイン初心者のための余白学習ロードマップで紹介しています)。