marginとpaddingはどう使い分けるの？

となりの部品との間隔を空けたいならmargin（枠の外）、枠と中身の間にゆとりを作りたいならpadding（枠の内）です。箱と箱の間隔がmargin、箱の中の緩衝材がpadding、とイメージすると覚えやすいです。

margin:0 autoで中央に寄らないときは？

部品に幅（widthまたはmax-width）が決まっているかを確認しましょう。幅の指定がないと、左右に振り分ける余白がそもそも生まれません。

2つなら「上下・左右」、3つなら「上・左右・下」、4つなら「上・右・下・左」の時計回りです。

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

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

p {
  margin: 16px;
}

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

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

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

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

「外」と「内」の違いは、色をつけて見比べるといちばんはっきりします。

padding は青い箱の中にゆとりが生まれ、margin は箱と箱のあいだにすき間（うしろのクリーム色）が生まれます。同じ「すき間」でも、できる場所が内と外で正反対です。

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

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

文字の下のすき間だけが大きくあき、上下左右で余白の量が違うのが見てとれます。

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

縦に並んだ2つの部品のmarginは、足し算されずに大きいほうだけが使われることがあります。

p {
  margin-bottom: 16px;
}
h2 {
  margin-top: 24px;
}

16px＋24px＝40pxにはならず、あいだのオレンジ色のすき間は大きいほうの24pxだけ。これが「マージンの相殺」です。

pの下16px＋h2の上24pxで「40pxのすき間」を想像しますが、実際にできるすき間は大きいほうの24pxだけ。これはmarginの縦方向だけに起きる「マージンの相殺」という仕様で、paddingには起きません。すき間が思ったより狭いときは、まずこれを疑ってみましょう。

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

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

幅の上限を決めた箱の左右の余りが auto で均等に分けられ、箱が中央にそろいます。

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