paddingとmargin｜違いと使い分け方の具体例

「余白ってパディングがいい？それともマージン？」

<div>などに余白をとるたび、迷ってしまう。

そんなhtml/css初心者の人は多いと思います。

実際、余白の作り方にきちんとした正解はありません。

パディング・マージンのどちらでもいい時があります。

また、どちらかじゃないといけない時も。

そこで、この記事ではパディングとマージンの役割と違いを解説しつつ、具体例に沿って使い分け方も紹介します。

パディング・マージンの違いと役割
1. 違い
2. 役割
パディングとマージンを使い分けるポイントは背景色
1. 背景色はパディングまでしかつかない
パディング
1. テキストとの間にパディングで余白を作る
2. 子要素との間にパディングで余白を作る
マージン
1. 兄弟要素にマージンで間隔をあける
パディングとマージンの使い分けの例外
参考サイト
まとめ

パディング・マージンの違いと役割

パディングとマージンの違いをさっそくご覧ください。

違い

※上の図をボックスモデルと言います。
【参考記事】box-sizingの前に、ボックスモデルを

要素

【参考記事】タグの書き方について｜要素との違いも解説

要素のエリアは境界線までとなっており、その線の

内側に作る余白がパディング
外側に作る余白がマージン

です。

役割

そして、こちらがそれぞれのおもな役割。

パディング → 要素のテキスト・子要素との間にすき間を作る
マージン → 兄弟要素と距離をとる

ただ、違いや役割が分かっても、どうやって使い分けていくのか？

これがもっともむずかしいところだと思います。

そんなわけで、使い分けのポイントを以下で解説します。

パディングとマージンを使い分けるポイントは背景色

パディングとマージン、どちらを使うか決める時にはポイントがあります。

それは、背景色をつけるかどうか。

背景色はパディングまでしかつかない

背景色はパディングまでにしかつきません。

下の図をご覧ください。

パディングには背景色がつきますが、マージンにはつきません。

なので、この背景色のありなしが、

「パディングを使うか・マージンにするのか」

の判断する大きなポイントになります。

というわけで、上のポイントを頭に残しながら、それぞれの使い方の例を見ていきましょう。

パディング

パディングは、「テキスト」や「子要素」との間に余白をとる時、指定します。

テキストとの間にパディングで余白を作る

まず、<h3>〜</h3>の中に書いた文字から、見てみましょう。

<h3>お知らせ</h3>

【パディング指定なし】

【パディング指定あり】

※<h3>には枠線(境界線)をつけています。

こうすると、分かりやすいですね。

余白があるのとないのとでは、だいぶ印象が変わります。

このように、パディングは枠線とテキストの間に余白をとりたい時、指定します。

ちなみにマージンだった場合の結果は、こちら。

【マージンを指定】

枠線の外側に余白ができます。

ですので、見た目は変わりません。

もう1つ、ご覧ください。

【パディング指定なし】

【パディングを指定】

今度は、背景色をつけました。

先ほどお伝えしたように、パディング部分には背景色がつくので上のような結果に。

これがもしマージンだったらどうなるのかというと…

【マージンを指定】

背景色の外側に余白をとるので背景色は大きくなりません。

なので、帯を太くしたい時はパディングを指定しましょう。

今度は、親要素と子要素の間に隙間を作る例です。

子要素との間にパディングで余白を作る

ここでは、2つのケースを見てみましょう。

まずは1つ目。

ケース1

親子関係は以下となります。

親：<div>
子：<h2>

htmlコードは、こちら。

<div>
  <h2>見出し</h2>
</div>

※<div>に境界線をつけています。

まずは、親要素の<div>にパディングを指定していきます。

【divにパディング指定なし】

境界線と文字の間には、余白がないですね。

【divにパディング指定あり】

ボーダーと「見出し」の間にスペースができました。

子要素のh2にパディングやマージンを指定したら…

ここで、次のような疑問が浮かぶかもしれません。

「あれっ、h2にパディングを指定しても余白がとれると思うけど？なんだったら、マージンでもいいんじゃね？」

触れてませんでしたが、子要素にパディングやマージンを指定する場合もじつはあります。

というわけで、<h2>にパディング・マージンを指定した結果を見ていくことにしましょう。

まだマージンの解説をしてないのに、すみません。

注目すべきは、子要素である<h2>に背景色があるかないかで結果が違う点です。

まずは背景色なしで、それぞれを指定。

h2の背景色なし

【h2にパディングを指定】

【h2にマージンを指定】

どちらも同じ見た目です。

これはまた、<div>にパディングを指定した時ともいっしょの結果となりました。

【divにパディングを指定した時】

今度は、<h2>に背景色をつけた場合。

h2に背景色あり

【背景色がついたh2にパディングを指定】

【背景色がついたh2にマージンを指定】

パディングを指定したら、青色が境界線まで広がっています。

理由は…

背景色はパディングにまでつくからでしたね。

マージンを指定した方は、背景色がつかないので、背景色は広がりません。

これが、背景色がある場合にパディングとマージンで指定する結果の違いです。

子要素の指定では、特にこういうことが起こります。

さて、ここでもう1度、親要素の<div>に戻ってみましょう。

もし、h2に背景色がついた状態で、divにパディングを指定したら…

<h2>に背景色がついた状態で、親の<div>にパディングを指定します。

【divにパディングを指定】

これは、先ほどの<h2>にマージンをとった時と同じ結果です。

【h2にマージンを指定】

説明しておいてなんですが、ちょっと混乱しそうになりますね。

と言いつつ、2つ目のケースへ…

解説する流れはケース1と同じです。

もしかしたらこちらの方が理解しやすいかもしれません。

ケース2

親子関係は下のようになります。

親：<div>
子：<div>

htmlコードはこちら。

<div class="sample1">
  <div class="sample2">
    <p>ただいま、作業中</p>
    <img src="sagyou.png" alt="作業">
  </div>
</div>

※親要素のdivに境界線をつけています。

まずは、親要素<div>にパディングをつけるところからはじめましょう。

【親要素divにパディング指定なし】

余白がない状態です。

【親要素divにパディングを指定】

境界線と文字・画像の間にスペースが入りました。

スッキリした感じですね。

子要素のdivにパディングやマージンを指定したら…

先ほどのように、子要素の<div>にパディングやマージンを指定してみます。

まずは、背景色なしで。

子要素divの背景色なし

【子要素divにパディングを指定】

【子要素divにマージンを指定】

見た目はいっしょですね。

先ほどの、親の<div>にパディングを指定したのとも同じです。

【親要素divにパディングを指定した時】

それでは、子に背景色をつけてみましょう。

子要素divの背景色あり

もう1度コードを見直してから、結果を見てみましょう。

<div class="sample1">
  <div class="sample2">
    <p>ただいま、作業中</p>
    <img src="sagyou.png" alt="作業">
  </div>
</div>

※親要素のdivに境界線をつけています。

【子要素divにパディングを指定】

【子要素divにマージンを指定】

パディングを指定すると、親要素<div>の境界線まで背景色が広がります。

一方、マージンを指定した方はというと、境界線との隙間には色がつきません。

ふたたび、親要素<div>へ。

もし、子要素divに背景色がついた状態で、親要素divにパディングを指定したら…

【親要素divにパディングを指定】

上で見た、子要素<div>にマージンをとった結果と同じになりました。

【子要素divにマージンを指定】

いろいろなパターンを見てもらいましたが、いかがだったでしょうか。

ポイントは以下の2つですね。

親要素・子要素
背景色あり・なし

と分けて考えるといいかもしれません。

いきなりはむずかしいとは思いますが…

と言いつつ、続いてマージンの説明に移ります。

マージン

マージンは、兄弟要素を離す時に指定します。

そうは言っても、なかなかイメージしづらいですよね。

どんな時に、要素を離した方がいいのか…

なので、こちらも例を見ていきましょう。

兄弟要素にマージンで間隔をあける

ここでも2つのケースをご覧ください。

兄弟関係にあるh2とpの場合

ケース1

以下のコードは、<h2>と<p>が兄弟関係にあります。

<h2>見出し</h2>
<p>ここから文章</p>

※<p>にだけ背景色を入れています。

【h2にマージンボトム指定なし】

上と下の文字にすき間がないですね。

【h2にマージンボトムを指定】

要素どうしを離すことができました。

ちなみに、これは<p>にマージントップを指定しても結果は同じ。

【pにマージントップを指定】

使いやすい方を指定してもらって大丈夫です。

押さえるべきは、どちらで指定するのか決めておくことです。

上の要素にマージンボトムとするのか、下の要素にマージントップ指定するのかを。

そうすれば、指定する迷いがなくなるはずです。

個人的には、<h2>にマージンボトムを指定する方が多いです。

もしパディングで余白をとったら…

パディングで余白をとった場合。

【背景色なし】

見かけ上、<h2>と<p>は離れたように見えます。

もし<h2>に背景色をつけたらどうでしょう。

【背景色あり】

<h2>の背景色が広がっているだけで、<p>とくっついたまま。

もし、以下のようにしたいなら、マージンを使いましょう。

続いて2つ目です。

section同士の場合

ケース2

縦に並んだ<section>1と<section>2の上下間に間隔をあけてみます。

ちなみに、親は<main>ですね。

コードで表すと、

<main>
  <section> /* 1つ目のsection */
     ⌇
  </section>
  <section> /* 2つ目のsection */
     ⌇
  </section>
</main>

というようになると思います。

【section1にマージンボトム指定なし】

【section1にマージンボトムを指定】

<section>1と<section>2にスペースがとれました。

ちなみに、<section>2にマージントップをとっても結果は同じです。

もしパディングを使ったら…

次は、パディングで間隔をあけてみましょう。

【section1にパディングボトムを指定】

先ほどのと見た目は同じですね。

ここで、<section>1に背景色をつけてパディングボトムを指定。

【section1にパディングボトムを指定(背景色あり)】

背景色が広がってしまい、<section>2とは距離をとれていません。

もう1つ、例をあげてみますね。

【section1にパディングボトムを指定】

【section1にマージンボトムを指定】

2つの<section>に違う色の背景色をつけているケースです。

<section>1のパディングボトムかマージンボトムかによって、見た目が変わってきます。

このように背景色をつける場合。

その背景色をどこまでにするかにより、パディングかマージンにするかが変わってきます。

なので、見本デザインを見ながら判断してみてください。

以上が、兄弟間にマージンとパディングで余白をとった結果です。

さいごは、例外のケース。

パディングとマージンの使い分けの例外

さいごに例外として、子要素にマージンを指定するケースを見ていきましょう。

以下をご覧ください。

<body>の真ん中に<main>を置く場合です。

親：<body>
子：<main>

<body>
  <header>
    ⌇
  </header>
  <main>
    ⌇
    ⌇
    ⌇
  </main>
  <footer>
    ⌇
  </footer>
</body>

main {
  max-width: 1000px; /* １０００pxまで広がる */
  margin-left: auto;
  margin-right: auto;
}

要素(ここではbody)の内側に余白をとる時は、パディングを指定するのが基本でした。

ただ、上記のような場合は<main>に

margin-left: auto
margin-right: auto

としましょう。

こうすれば、幅1000px以上で<main>の左右には均等な余白ができるからです。

※margin: autoのくわしい解説は、『text-align: center』の中にある「ブロック要素を中央寄せする」をご覧ください。クリックすると、該当箇所にジャンプします。

参考サイト

ホント今さらですが、この記事で紹介した「パディング・マージン」は、CSS3をもとに書きました。

CSS3とは、CSSのルールブックの最新版です。

※すべてのサイトで翻訳あり。

むずかしめに書かれてあるので、余裕のある人だけチラッと目を通してください。

まとめ

今回は、パディングとマージンの使い分けについて解説してきました。

パディングはテキストや子要素との間に距離をとる
マージンは兄弟要素との間に距離をとる
背景色はパディングまでつく

使い分けるポイントは、背景色をつけるかどうかということでした。

以上を踏まえながら、余白を設定してみてください。

そうすれば、「ここは背景色をつけないから、パディングにしよう」といった判断ができるようになるはずです。

displayのブロックとインラインについて

余白の決め方が分かったら、ブロックとインラインについて学習してみるのがオススメです。

なぜかというと、インラインでは一部余白の指定ができないなどの違いがあるからです。

違いを知り、パディングとマージンを使いこなせるようになりましょう。

くわしくは、以下の記事からご覧ください。

【css】ブロック要素とインライン要素、3つの違い

初心者の方向けに、ブロック要素・インライン要素の違いについて解説しています。ブロック要素ではできて、インライン要素ではできないこと。これを理解しましょう。

こちら、ただの余白の本と思って手にしたんですが、めちゃめちゃオシャレな見せ方を作れます。ダサさから抜け出したい人は、ぜひ手にとってみてください。

けっきょく、よはく。余白を活かしたデザインレイアウトの本（電子書籍、単行本）