CSS
margin・padding の違い
初級読み方：マージン・パディング のちがい｜英語：margin vs padding
marginは要素の「外側」の余白、paddingは要素の「内側」の余白。ボックスモデルの基本。
やさしい説明
marginは要素の外側の余白で、他の要素との間隔を作ります。paddingは要素の内側の余白で、内容と枠線の間を空けます。
プレゼントの箱に例えると、margin は「箱と箱の間のスペース」、padding は「箱の中の緩衝材（プチプチ）」です。
背景色は padding の範囲まで塗られますが、margin の範囲には塗られません。この違いを覚えておくと使い分けが簡単です。
図解：marginとpaddingの違い
具体例・使い方
/* margin: カード同士の間隔 */
.card { margin-bottom: 20px; }
/* padding: カード内側のゆとり */
.card { padding: 24px; }
/* 中央揃え（marginの特殊な使い方） */
.container { margin: 0 auto; }いつ使う？
要素同士の間隔を空けたい → margin。要素の内側にゆとりを作りたい → padding。ボタンの文字と枠の間 → padding。ボタンとボタンの間 → margin。
間違いやすいポイント
❌ 上下のmarginが相殺される
上の要素の margin-bottom と下の要素の margin-top は合算されず、大きい方だけが適用されます。paddingにはこの問題はありません。
よくある疑問
Q: どちらを使えばいいか迷ったら？
A: 要素同士の間隔を空けたいならmargin、要素の中身と枠線の間を空けたいならpaddingです。
Q: marginに負の値は使える？
A: はい。負のmarginを使うと要素を重ねたり、はみ出させたりできます。paddingには負の値は使えません。
関連用語
📖 関連レッスン
レッスンを見る →