目次
余白は「お家の外」か「お家の中」かの違いです
ども。Dadです。
Webサイト上のすべての要素（文章や画像など）は、以前お話しした通り「div」などの「箱」に入っています。この「箱」の周りに作る余白には、大きく分けて2つの種類があります。
- margin（マージン）： 箱の「外側」の余白。隣の箱との距離。
- padding（パディング）： 箱の「内側」の余白。箱の縁と中身の間の距離。
一見、どちらも「隙間を空ける」という点では同じに見えますが、役割が全く異なります。この違いを正しく使い分けることが、プロっぽいレイアウトへの第一歩となります。
なぜ使い分ける必要があるのでしょうか？
なぜ「外」と「内」を厳密に分ける必要があるのか。それは、サイトに「背景色」や「枠線（ボーダー）」をつけたときに、結果が劇的に変わってしまうからです。
- marginを広げると、お家同士の距離が離れます。
- paddingを広げると、お家の中が広くなり、壁と家具の間にゆとりが生まれます。
もしこれをごちゃ混ぜにしてしまうと、背景色を塗ったときに「本当は文字の周りに色がついてほしいのに、なぜか文字のすぐ外側で色が切れてしまう！」といったトラブルが起きてしまいます。
イモムシさんの「お家づくり」でイメージしてみましょう
ここで、私たちの主役である「M字型のイモムシさん」の暮らしを覗いてみましょう。
marginは「お庭（境界線）」
イモムシさんは、森の中に自分専用の「箱型のお家」を建てました。 隣には、仲良しのテントウムシさんのお家があります。お家同士がくっつきすぎていると、お互い窮屈ですよね。そこで、お家の外側に「ここからは私の敷地ですよ」というお庭（margin）を作りました。
- marginを増やす： お庭が広くなり、隣の家との距離が遠くなります。
paddingは「クッションの厚み」
次に、お家の中を見てみましょう。イモムシさんはお家の中で、大切な「どんぐり」を保管しています。 お家の壁（枠線）のギリギリまでどんぐりが詰まっていると、なんだか苦しそうです。そこで、壁とどんぐりの間にフカフカのクッション（padding）を敷き詰めました。
- paddingを増やす： お家の中のゆとりが増え、どんぐりが中央に大切に置かれているように見えます。
CSSでの「箱（ボックスモデル）」のルール
この「中身」＋「padding」＋「枠線」＋「margin」という構造を、専門用語で「ボックスモデル」と呼びます。
これはあくまで「HTMLの箱」をどう扱うかというCSS（装飾）のルールですが、Web制作においては「構造」を理解するのと同義です。 JavaScript（動き）のように「箱を動かす」前に、まずはこの「箱のサイズと距離」を正しく設定してあげることが大切ですね。
余白をマスターすれば、デザインに「呼吸」が生まれます
デザインにおいて、余白は単なる「何もない空間」ではありません。読者の視線を誘導し、情報を整理するための「呼吸」のようなものです。
適切なmarginとpaddingを使い分けられるようになると、あなたのサイトは一気に読みやすくなります。 「なんだか自分のサイトが窮屈に見えるな…」と感じたら、まずはこのイモムシさんのお家を思い出して、お庭（margin）とクッション（padding）を調整してみてください。
