コーディング犬に聞く：「marginとpaddingの違いって？」
CSSを勉強し始めた時、多くの人が混乱するものがあります。
それが、
margin
paddingです。
初心者の頃は、
- どっちも余白じゃないの？
- 何が違うの？
- なぜ思った位置にならないの？
となりがちです。
今回は、Web制作初心者がつまずきやすい
「marginとpaddingの違い」
をコーディング犬に聞いてみました。
Q. marginとpaddingって何が違うの？
「超シンプルに言うとこれです。」
- margin → 外側の余白
- padding → 内側の余白
です。
Q. “外側”と“内側”って？
「まずは箱をイメージすると分かりやすいです。」
例えばこんなHTML。
<div class="box">
テキスト
</div>そしてCSS。
.box{
background: #eee;
}この状態では、文字と背景がかなり近いです。
padding を入れると？
.box{
background: #eee;
padding: 20px;
}すると、
- 背景の内側
- 文字との距離
が広がります。
つまりpaddingは、
「中身を内側に押し込む余白」
です。
margin を入れると？
.box{
margin: 20px;
}これは、
“他の要素との距離”
が空きます。
つまりmarginは、
「外との距離」
です。
Q. 図で見るとどういう感じ？
「こう考えると分かりやすいです。」
margin
┌─────────────────┐
│ padding │
│ ┌───────────┐ │
│ │ テキスト │ │
│ └───────────┘ │
└─────────────────┘- padding → 箱の内側
- margin → 箱の外側
です。
Q. よくある初心者ミスは？
「paddingで間隔を空けようとすること。」
例えば、
margin-bottom: 30px;を使うべき場所で、
padding-bottom: 30px;を使ってしまうケース。
すると、
「背景まで伸びる」
問題が起きます。
Q. 背景色が変になる理由は？
「paddingは背景も広がるからです。」
例えば、
.box{
background: red;
padding: 30px;
}この場合、
赤背景も一緒に広がります。
でもmarginは、
背景は広がりません。
ここが大きな違いです。
Q. どっちをよく使う？
「両方めちゃくちゃ使います。」
例えば、
要素同士の距離
margin-bottom: 40px;ボタンの内側余白
padding: 12px 24px;こういう使い分けをします。
Q. ボタンで考えると分かりやすい？
「かなり分かりやすいです。」
例えばボタン。
<button>
送信
</button>paddingを入れると、
button{
padding: 16px 32px;
}ボタンが大きくなります。
これは、
文字とボタン端の距離
が広がったからです。
marginを入れると、
button{
margin-top: 30px;
}今度は、
“他の要素との距離”
が空きます。
Q. なぜmarginだけ効かない時がある？
「marginの相殺があるからです。」
CSSには、
“marginが重なる”
仕様があります。
例えば、
.box1{
margin-bottom: 40px;
}
.box2{
margin-top: 40px;
}本来80pxになりそうですが、
実際は40pxになることがあります。
これを、
「marginの相殺」
と言います。
初心者が混乱しやすいポイントです。
Q. じゃあ余白はどう考えればいい？
「外との距離か、中との距離か。」
これだけです。
- 外側 → margin
- 内側 → padding
まずはこれだけ覚えればOKです。
Q. CSSが上達する人は何が違う？
「余白をちゃんと設計してます。」
初心者は、
「なんとなく余白」
になりがちです。
でも上手い人は、
- 余白ルール
- 間隔統一
- padding設計
- margin管理
を意識しています。
実は、
“余白”
だけでデザインの綺麗さはかなり変わります。
まとめ
marginとpaddingは、
どちらも余白です。
でも意味が違います。
- margin → 外側の距離
- padding → 内側の距離
初心者のうちは、
「どっちだったっけ？」
と混乱して当然です。
でも、
「背景も広がるならpadding」
「要素同士の距離ならmargin」
と考えるとかなり理解しやすくなります。
CSSは、
余白を理解すると一気に楽しくなります。
コーディング犬との約束です。
