marginとpaddingの違いとは？余白を正しく使い分ける考え方

Webサイトのコーディングでは、文字や画像を配置するだけでなく、要素同士の余白を整える作業が欠かせません。

この余白を設定するときに使われるのが、marginとpaddingです。

どちらも見た目上は「空白を作る」ため、学び始めたばかりの頃は違いが分かりにくく、なんとなく使い分けてしまいがちです。

しかし、両者の役割を理解しないまま使うと、背景色が途中で切れたり、クリックできる範囲が狭くなったり、スマートフォンで意図しない余白が生まれたりします。

今回は、marginとpaddingの違いと、実際のWeb制作での使い分け方を解説します。

marginは要素の外側に作る余白

marginは、要素の外側に余白を作るために使用します。

見出しと文章の間を離したい場合や、カード同士の間隔を空けたい場合など、別々の要素を離すための余白です。

たとえば、複数のカードが並んでいるとき、それぞれのカードの間隔を調整したいのであれば、外側の余白として考えます。

marginの範囲には、基本的に要素の背景色や枠線は含まれません。

そのため、「この要素と次の要素をどれくらい離すか」を決めるものだと考えると分かりやすくなります。

paddingは要素の内側に作る余白

paddingは、要素の内側に余白を作るために使用します。

ボタンの文字と枠の間を広げたい場合や、背景色の付いたカードの中で文章に余裕を持たせたい場合などに使います。

paddingの範囲には、要素の背景色やクリックできる範囲が含まれます。

たとえば、ボタンの文字の周囲を広く見せたいときにmarginを使っても、ボタン自体の大きさは変わりません。一方、paddingを使えばボタンの内側が広がり、見た目だけでなくクリックしやすさも改善できます。

「箱の中身と箱の枠の間にある余白」がpaddingです。

背景色を見ると違いが分かりやすい

marginとpaddingの違いが分からなくなったときは、背景色がどこまで表示されるべきかを考えると判断しやすくなります。

背景色を含めて余白を広げたい場合は、内側の余白であるpaddingが適しています。

背景色の付いたセクションと、次のセクションの間に白い空間を作りたい場合は、外側の余白であるmarginが候補になります。

ただし、セクション全体の上下幅を確保したい場合は、marginよりもpaddingを使う方が自然なことが多いです。

背景色や背景画像を含めてセクションの面積を広げられるため、デザインを管理しやすくなります。

ボタンの大きさはpaddingで調整する

ボタンの大きさを調整するとき、文字サイズだけを大きくしたり、固定の横幅や高さを設定したりする方法もあります。

しかし、文章の長さが変わることを考えると、文字の周囲にpaddingを設定して大きさを作る方が柔軟です。

ボタンの外側にmarginを設定しても、周囲の要素との距離が広がるだけで、ボタン自体は押しやすくなりません。

押しやすいボタンにするためには、見た目の大きさだけでなく、実際にクリックやタップが反応する範囲を広げる必要があります。

そのため、ボタンの内側には適切なpaddingを設けます。

要素同士の間隔は一方向で管理する

見出しの下にもmarginを設定し、続く文章の上にもmarginを設定すると、どちらの余白が表示に影響しているのか分かりにくくなります。

修正時に片方だけ変更しても思ったように動かず、不要な指定を追加する原因にもなります。

要素同士の間隔は、上側の要素に下方向の余白を設定するなど、プロジェクト内で基本的な方向を決めておくと管理しやすくなります。

すべての場面で完全に統一する必要はありませんが、余白の持たせ方にルールがない状態は避けるべきです。

余白を感覚だけで決めない

デザインを見ながら、その場で余白の数値を決めていくと、似たような場所で微妙に異なる数値が増えていきます。

見出しと文章、カード同士、セクション同士など、役割ごとにある程度の基準を決めておくことが重要です。

余白の基準を作っておけば、サイト全体に統一感が生まれます。また、スマートフォン表示で余白を調整するときも、変更する場所を判断しやすくなります。

余白は空いていればよいのではなく、情報のまとまりや優先順位を伝えるためのデザイン要素です。

迷ったときの判断基準

marginとpaddingのどちらを使うか迷ったときは、次のように考えます。

要素同士を離したい場合はmargin

要素の中身と枠の間を広げたい場合はpadding

背景色を含めて広げたい場合はpadding

ボタンの押せる範囲を広げたい場合はpadding

セクション同士の距離を調整したい場合はmargin

セクション内の上下幅を作りたい場合はpadding

単に見た目を合わせるのではなく、「どの範囲に余白が必要なのか」を考えることが大切です。

まとめ

marginとpaddingは、どちらも余白を作るためのものですが、役割は異なります。

marginは要素の外側にある余白で、別の要素との距離を調整します。paddingは要素の内側にある余白で、内容と枠の間隔を調整します。

この違いを理解すると、背景色の範囲やボタンの大きさ、セクションの余白を意図どおりに設計できるようになります。

余白をなんとなく追加するのではなく、その余白が要素の内側に必要なのか、外側に必要なのかを考える。

それだけでも、CSSは整理しやすくなり、後から修正しやすいWebサイトを作れるようになります。