CSSの余白がわかる marginとpaddingの役割と使い分け
「Webページを作ってみたけれど、要素同士がくっつきすぎて見にくい」「ボタンの文字が枠線ギリギリで窮屈…」そんな悩みはありませんか？これらはすべて「余白」の使い方が原因です。この記事では、CSSレイアウトの基本中の基本である「margin」と「padding」の役割と違いを、初心者の方にもわかりやすく解説します。
ボックスモデルの基本
Webページに表示されている見出し、段落、画像などは、CSSの世界ではすべて四角い「箱（ボックス）」として扱われます。この考え方を「ボックスモデル」と呼びます。
すべての箱は、中心から外側に向かって以下の4つの要素で構成されています。
- Content（コンテンツ）：文字や画像などの中身そのもの。
- Padding（パディング）：中身と枠線の間の「内側の余白」。
- Border（ボーダー）：箱を囲む「枠線」。
- Margin（マージン）：枠線のさらに外側にある「外側の余白」。
パディング (padding) とは？ - 箱の「内側」の余白
パディングは、要素の中身（文字や画像）と枠線の間のスペースです。いわば「箱の中の詰め物」のような役割をします。
- 背景色が適用される：要素に背景色（background-color）を設定している場合、パディング部分にもその色が塗られます。
- クリック範囲に含まれる：ボタンなどの場合、パディングを広くするとクリックできる領域も広がります。
例えば、額縁付きの写真をイメージしてください。写真本体と額縁の間にある「余白（台紙）」の部分がパディングにあたります。
マージン (margin) とは？ - 箱の「外側」の余白
マージンは、要素の枠線の外側にあるスペースです。隣り合う他の要素との距離を保つために使われます。
- 背景色は適用されない：マージンは常に透明なスペースです。
- 要素の外側を調整する：要素そのものの大きさは変えず、周囲との「間隔」を作ります。
本棚に並んだ本と本の間のスキマや、駐車場に停まった車と車の間のスペースをイメージするとわかりやすいでしょう。
一目でわかる！マージンとパディングの違い
パディングとマージンの違いを整理すると、以下のようになります。
| 項目 | パディング (padding) | マージン (margin) |
|---|---|---|
| 余白の場所 | 枠線の「内側」 | 枠線の「外側」 |
| 背景色の有無 | つく（要素の色） | つかない（透明） |
| 主な役割 | 中身の窮屈さを解消する | 他の要素との距離をあける |
初心者がつまずきやすい「マージンの相殺」とは？
CSSには、上下に並んだ要素のマージンが重なったとき、それらが合体して一つの大きなマージンになってしまう「マージンの相殺」という現象があります。例えば、上の要素に20px、下の要素に30pxのマージンを設定しても、合計50pxにはならず、大きい方の30pxだけが適用されることがあります。思い通りに余白が空かないときは、この現象を疑ってみてください。
どっちを使えばいい？使い分けのコツ
パディングを使うべきとき
- ボタンの文字が枠線に近すぎて読みづらいとき
- 記事の文章と枠線の間にゆとりを持たせたいとき
- 要素自体の見た目（色がついている部分）を大きく見せたいとき
マージンを使うべきとき
- 見出しと本文の間を離したいとき
- 横に並んだ画像同士がくっつかないようにしたいとき
- 要素を画面の真ん中に寄せたいとき（margin: 0 auto;）
まとめ
パディングは「内側」、マージンは「外側」。この基本を覚えるだけで、Webサイトの見た目はぐっとプロフェッショナルになります。まずは、どちらを使えば自分の理想のレイアウトになるか、実際に数値を変更しながら試してみてくださいね。
