「marginとpaddingって、どっちを使えばいいの？」
Web制作を始めたばかりのころ、私もこの2つの違いが分からず、何度も混乱しました。
余白を指定しているのに思った通りに反映されなかったり、デザインが崩れたり…。
実は margin と padding は「どこに余白をつけるか」が違うだけです。
このページでは、初心者が特につまずきやすい marginとpaddingの役割と使い分け を整理していきます。
marginとは？
marginとは、要素の外側にできる「余白」のことです。
たとえば、名刺のデザインを思い浮かべてください。名前や住所などの文字が、紙の端っこギリギリに書かれていたら、ちょっと見にくく感じますよね。そんなときに「周りに余白をつけて見やすくする」のがmarginの役割です。
たとえばこんなときに使います
- ボタンとボタンの間にスペースを空けたいとき
- セクションとセクションの距離をあけたいとき
- 画像やテキストを周囲の要素から離したいとき
.card {
margin-bottom: 20px; /* 下に余白を作る */
}paddingとは？
paddingとは、「中身（文字や画像など）」と「枠（ボックスの外側）」との間の余白のことです。
たとえば、お弁当箱の中にふわふわのクッション材を敷いて、具材がぶつからないように優しく包む…
そんなイメージが近いかもしれません
どこにできるの？
paddingも、上下左右それぞれに余白をつけられます。
.button {
padding: 10px 20px; /* 上下10px、左右20px 内側に余白を作る */
}どんなときに使うの？
- テキストと枠線がくっついて読みにくいとき → paddingで内側にスペースを作る
- ボタンを大きく見せたいとき → paddingで中身を膨らませる（marginじゃなくて）
- 枠内にアイコンと文字があるとき → paddingでバランスよく
たとえば、こんなコードがあったとして…
<button class="button">クリック</button>.button {
padding: 10px 20px;
}これだけで、ボタンがぽってり可愛くなるんです。
paddingは、中身が窮屈にならないようにスペースを取ってあげるやさしい配慮です。
要素にふわっと空気を含ませるイメージで。
marginとpaddingを正しく使い分けるコツ
迷ったときの判断基準
実際のコーディングでは、marginとpaddingを明確に使い分けることでレイアウト全体が整いやすくなります。要素同士の距離を調整したいときにはmarginを使い、要素の中身の居心地を整えたいときにはpaddingを使う、これが基本の考え方です。
よくある失敗例と解決のヒント
ボタンのテキストが窮屈に見えるときにmarginで調整してしまうと、ボタンの外側にしか余白ができず、結局デザインが崩れてしまいます。逆に複数のボックスを並べたときにpaddingで調整すると、内部が押し広げられてしまい、要素同士の距離は変わらないままになります。このような間違いは初心者あるあるですが、「外か内か」を意識するだけでぐっと減ります。
実際に試して覚える
中央にcontentがあり、その周りにpadding、さらにその外側にborder、そして最後にmarginがあるという構造を目で確認することで、頭の中の整理がつきます。実際にブラウザの開発者ツールを開き、要素を選択するとmarginやpaddingが色分けされて表示されます。試しに数字を増減させてみると、余白の変化が一目で分かり、感覚的にも理解できるようになります。
違いを図でイメージ
- margin → 「箱の外にスペース」間隔
- padding → 「箱の中にスペース」クッションの役割
言葉にすると難しいので図解にしてみました。
要素のすぐ外側にpadding。
paddingはborderで覆われ、borderの外にmarginがある。
ボタンをイメージすると分かりやすいです！
「お問い合わせ」という文字の周囲にはpaddingの余白があります。
paddingはborderで覆われていて、borderの外側にmarginが広がっています。
まとめ
marginとpaddingは単純に見えて、初心者を大きく迷わせる要素です。しかし仕組みさえ理解してしまえば、むしろ「デザインを整えるための強力な武器」に変わります。特にレスポンシブ対応を意識するようになると、要素間のバランスや内側の余白の持たせ方が非常に重要になってきます。スマートフォンとPCで同じ見た目を維持するためには、marginとpaddingを適切に組み合わせることが欠かせません。
最後にもう一度整理すると、marginは外側の余白、paddingは内側の余白です。どちらも余白を扱いますが、適用される場所が違うため、目的に合わせて正しく使い分けることが大切です。余白は見た目の美しさだけでなく、文字の読みやすさや操作のしやすさにも直結します。marginとpaddingの違いを理解することは、単なる知識の習得ではなく、より快適なWeb体験を作る第一歩です。
私自身が初心者のころに迷った経験をもとにまとめました。同じように悩んでいる方にとって、この解説が少しでも助けになれば嬉しいです。