CSSでWebサイトを作っていると、「marginとpaddingって何が違うの？」「余白を作りたいときは、どっちを使えばいい？」「paddingを指定したら思ったより要素が大きくなった……」と悩むことがあります。
marginとpaddingは、どちらもCSSで「余白」を作るために使われます。しかし、余白ができる場所が違うため、目的に合わせて使い分けることが大切です。
この記事では、CSS初心者の方に向けて、marginとpaddingの違いをわかりやすく解説します。
「CSS margin padding 違い」「margin padding 使い分け」「CSS 余白」といったキーワードで調べている方も、ぜひ参考にしてください。
marginとpaddingの違い
まずは、もっとも重要な違いを覚えておきましょう。
marginは「要素の外側」の余白、paddingは「要素の内側」の余白です。
イメージすると、以下のようになります。
ざっくり覚えるなら、
margin＝要素と要素の間を空けるpadding＝要素の中身と枠の間を空ける
と考えるとわかりやすいでしょう。
marginとは？
marginは、HTML要素の外側に余白を作るCSSプロパティです。
たとえば、見出しと本文の間を30px空けたい場合は、次のように書けます。
h2 {
margin-bottom: 30px;
}
これによって、見出しの下側に30pxの余白ができます。
marginを使う場面
marginは、主に以下のような場面で使います。
- 見出しと本文の間隔を空ける
- 画像と文章の間隔を空ける
- カードとカードの間隔を空ける
- セクション同士の間隔を空ける
- ボタンと他の要素の間隔を空ける
つまり、「要素と要素を離したい」ときはmarginと考えるとよいでしょう。
paddingとは？
一方のpaddingは、要素の内側に余白を作るCSSプロパティです。
たとえば、カードの中にある文字とカードの枠との間に余白を作りたい場合は、次のようにします。
.card {
padding: 24px;
}
これによって、カードの内側に24pxの余白ができます。
paddingを使う場面
paddingは、主に以下のような場面で使います。
- カードの内側に余白を作る
- ボタンの文字周りに余白を作る
- ボックスの中身と枠の距離を空ける
- 背景色が付いたエリアの内側に余白を作る
つまり、「要素の中身と枠を離したい」ときはpaddingです。
marginとpaddingの違いを具体例で理解しよう
カードの中の文字と、カードの端との距離を広げたい場合はpaddingを使います。
paddingはカードの内側に作られるため、背景色が付いている範囲も含めて余白になります。
一方、カードそのものと次のカードとの間隔を広げたい場合はmarginを使います。
このように、
カードの中を広げる＝padding
カードと別の要素を離す＝margin
と考えると、使い分けが簡単になります。
marginとpaddingは上下左右に指定できる
marginとpaddingは、上下左右それぞれに値を指定できます。
.box {
margin-top: 20px;
margin-right: 10px;
margin-bottom: 30px;
margin-left: 10px;
}
paddingも同じように指定できます。
.box {
padding-top: 20px;
padding-right: 16px;
padding-bottom: 20px;
padding-left: 16px;
}
ただし、すべて個別に指定するとコードが長くなります。
そこで、まとめて指定する書き方もよく使われます。
.box {
padding: 20px 16px;
}
これは、
- 上下：20px
- 左右：16px
という意味です。
marginとpaddingのショートハンド
CSSでは、4方向の余白をまとめて指定することもできます。
.box {
margin: 10px 20px 30px 40px;
}
この場合は、
- 上：10px
- 右：20px
- 下：30px
- 左：40px
という順番です。
時計回りに指定すると覚えておくと便利です。
paddingでも同じルールが使えます。
.box {
padding: 10px 20px 30px 40px;
}
よくある初心者の間違い
marginとpaddingを使うときにありがちな間違いが、「とりあえず余白を作るためにどちらかを使う」ことです。
たとえば、カードの文字が端に近いからといってmarginを設定しても、カード内部の余白を適切に作ることはできません。
.card {
margin: 24px;
}
これはカードの外側に余白を作っています。
カードの中身と枠を離したいのであれば、
.card {
padding: 24px;
}
とするのが基本です。
何をどこから離したいのかを考えてから、marginかpaddingを選ぶようにしましょう。
CSSの余白はmarginとpaddingを組み合わせる
実際のWebサイトでは、marginとpaddingのどちらか一方だけを使うわけではありません。
たとえば、カードなら次のように組み合わせられます。
.card {
padding: 24px;
margin-bottom: 32px;
}
この場合、
padding: 24px→ カード内部の余白margin-bottom: 32px→ カードの下側の余白
という役割になります。
このように、内側の余白はpadding、外側の余白はmarginと役割を分けると、CSSを整理しやすくなります。
marginとpaddingの違いまとめ
最後に、違いを表にまとめてみましょう。
| margin | padding | |
|---|---|---|
| 余白の場所 | 要素の外側 | 要素の内側 |
| 主な用途 | 要素同士を離す | 中身と枠を離す |
| 背景色 | 余白部分には基本的に付かない | 余白部分にも背景色が付く |
| 代表的な用途 | セクション間、カード間 | カード内部、ボタン内部 |
初心者の方は、まずこの違いだけ覚えておけば十分です。
margin＝外側
padding＝内側
という基本ルールを覚えたうえで、実際のデザインに当てはめてみましょう。
まとめ
CSSのmarginとpaddingは、どちらもWebサイトの余白を調整するために欠かせないプロパティです。
違いはシンプルで、
margin＝要素の外側の余白padding＝要素の内側の余白
です。
「カード同士を離したい」「見出しと本文の間を空けたい」という場合はmargin。
「カードの中の文字を枠から離したい」「ボタンを大きくしたい」という場合はpadding。
このように、「何と何の間に余白を作りたいのか」を考えると、適切なプロパティを選びやすくなります。
CSSの余白設定で迷ったときは、まず「内側か外側か」を確認するところから始めてみましょう。
