CSSの余白の作り方（marginとpaddingの違い）

きれいなページと、なんだか読みにくいページ。その差は、じつは余白（すき間）にあることがほとんどです。文字や部品がぎゅうぎゅうに詰まっていると窮屈で、ほどよく空いていると上品に見えます。余白をあやつる2つのプロパティを覚えましょう。

外側の余白：margin

margin は、部品のまわり（外側）にすき間をつくります。となりの部品との間隔をあけたいときに使います。

p {
  margin: 16px;
}

「段落のまわりに、16ピクセルのすき間をあける」という意味。これで、段落どうしがくっつかず、ゆったり並びます。

padding は、部品の中身と枠の間（内側）にすき間をつくります。背景に色をつけたボタンなどで、文字が枠にぴったりくっつかないようにするときに活躍します。

h1 {
  background-color: teal;
  color: white;
  padding: 12px;
}

背景色をつけただけだと文字が枠にくっついて窮屈ですが、padding を足すと中にゆとりが生まれ、ぐっと見やすくなります。

margin: 16px; は上下左右すべてに16pxをつけますが、方向ごとに数字を複数並べると、まとめて別々の値を指定できます。

p {
  padding: 26px 24px 44px;
}

数字が3つなら「上、左右、下」の順。数字を4つ並べれば「上、右、下、左」と時計回りに1つずつ指定できます。2つなら「上下、左右」。数字の数で意味が変わるのがポイントです。

margin には、もう1つ便利な使い方があります。左右を auto（自動）にすると、部品が画面の真ん中に寄ります。

p {
  max-width: 500px;
  margin: 0 auto;
}

「上下は0、左右はauto」という意味。auto は「余ったスペースを左右で均等に分ける」という指定なので、結果として真ん中に寄って見えるのです。max-width とセットで使うのが定番——幅に上限をつけて、余った左右のスペースを auto で均等に分ける、という組み合わせです。

margin: 0 auto; での中央寄せは、この先クラスで実際のカードを作るときに、たっぷり出番があります。 :::