CSS
margin・padding の違い
読み方：マージン・パディング のちがい
marginは要素の「外側」の余白、paddingは要素の「内側」の余白。ボックスモデルの基本。
やさしい説明
marginは要素の外側の余白で、他の要素との間隔を作ります。paddingは要素の内側の余白で、内容と枠線の間を空けます。
具体例・使い方
margin: 20px; → 要素の外側に20pxの余白
padding: 20px; → 要素の内側に20pxの余白
背景色はpaddingの範囲には付くが、marginには付かない
よくある疑問
Q: どちらを使えばいいか迷ったら？
A: 要素同士の間隔を空けたいならmargin、要素の中身と枠線の間を空けたいならpaddingです。
Q: marginに負の値は使える？
A: はい。負のmarginを使うと要素を重ねたり、はみ出させたりできます。paddingには負の値は使えません。
関連用語
📖 関連レッスン
レッスンを見る →