こんにちは。みとまるです。
最近、CSSの学習を進める中で「paddingとmarginの違い」についてモヤっとする場面がありました。
特に、borderがない場合でもmarginを使うケースに戸惑うことがあったので、
自分なりにスッキリ整理した内容をシェアします😊
目次
paddingとmarginの基本的な違い
まずは基本から。
padding（内側の余白）
- 要素の中身（文字や画像など）と、要素の端（枠）とのスペースを作る
- 背景色やborderがある場合、padding部分も含めて背景がつく
margin（外側の余白）
- 要素自体と、隣の要素（別の要素）とのスペースを作る
- 背景や枠は含まれず、ただの間隔
borderがない場合はどう考える？
「borderがないからpaddingかな？」
と最初は思ってしまいましたが、これは違います。
borderがなくても、次の要素との間隔を作りたい場合はmarginを使います。
実際、私が学習していた中ではこんなコードがありました。
.contents-item {
margin-right: 30px;
}
.contents-item p {
margin-top: 20px;
}これは、要素と要素の間のスペースを調整するためなので、paddingではなくmarginが適切です。
まとめ
| 目的 | 使うもの |
|---|---|
| ボックス内の余白を作る | padding |
| ボックス同士の間の距離を作る | margin |
borderの有無に関係なく、「どこを空けたいか？」で考えると迷わないと学びました！
学んだ感想
私はProgateで学習中ですが、
JavaScriptのときは比較的スムーズだった一方、HTML/CSSはやや直感と違う動きをする場面が多くて難しく感じています。
ですが、こうして「なるほど！」が増えていくのがすごく楽しいです。
今後はFlexboxやGridも学んで、もっとスムーズにレイアウトを組めるように頑張ります✨
おわりに
CSS初心者の方で、私と同じように「borderないのにmargin？」と迷った方の参考になれば嬉しいです。
引き続き、学びの記録をブログで残していきたいと思います🌷
コメント