#15  paddingとmarginの違いとボックスモデルの理解

本講座のゴール

「#08_よく使う10個のプロパティを覚えよう」で学習したpaddingとmarginですが、「どんな時にpaddingを使って」逆に「どんな時にmarginを使う」のか、いまいちピンときていませんよね。

この講座では最終的に小テストを用意して「このケースはmarginとpaddingどっち？」というクイズを出します。そのクイズの正答率が7割越えるようになれば良いと思います！

paddingとmarginは余白を調整するために使う

paddingとmarginが「何を」調整するために使用されるものかというと「余白」になります。ここでいう余白とは要素同士の間隔という意味です。

HTMLは通常上と左へ要素を詰めて配置されます。そのためpaddingやmarginで余白を確保しないと綺麗に見せることができません。

ボックスモデルについて

marginとpaddingをきっちり理解したいなら、「ボックスモデル」という概念の理解を避けることはできません。

しかし、このボックスモデルさえ理解すればmarginとpaddingの違いが嘘みたいに理解できるようになります！

「ボックスモデルの理解 = margin、paddingの違いの理解」と言っても良いくらいです。

それでは解説していきます。

ボックスモデルとは要素が持つ「領域」のことです。なんだか難しそうに聞こえてしまった人はとりあえず以下の画像をみてください。

これを見てもまだ少し難しいと思います。そこでみなさんが普段見ているWEBサイトの要素がどのようなボックスモデルになっているか見てみましょう。

例を見るとわかるように

• 見出しには上下に線がついていて、
• 見出しと線の間に余白があって
• 見出しと画像の間にも余白があります

これらがボックスモデルで見るとどのような内訳になっているか？というものが右の画像です。

この例からわかることは、

• 見出しと枠線の間に余白を入れるためにはpaddingを使う
• 枠線と画像の間に余白を入れるためにはmarginを使う

ということがわかりますね。

つまりボックスモデルを理解するということは「要素のこの箇所に余白を入れたいけど、paddingとmarginどっちを使ったらいいの？を適切に判断する」ということに繋がります。

web兄さん

このように僕たちが普段見ているWEBサイトの要素のひとつひとつ全てに「ボックスモデル」が適用されています。

前回の講座で解説した家で例えた場合…

前回以下のようにmarginとpaddingの違いを家でたとえたのを覚えていますか？

自分の敷地を広げて（内側の余白を広げて）距離を取るのがpadding

相手との距離を取る（外側に余白を広げる）のがmargin

という使い分けと説明しました。

そして、このイメージに対してボックスモデルを当てはめると以下のようになります。

こうやってみると、なぜ要素の内側の余白をつける時がpaddingで、要素同士を離す時はmarginなのかはっきりとわかりますよね。

paddingとmarginをアニメーションで理解しよう

ここまで少し理屈っぽい説明が続いて疲れてしまったと思うので、一度感覚でmarginとpaddingを理解してみましょう。

ボタンをクリックして動きを確認しよう

これからサンプルをいくつか見せます。ボタンをクリックすると余白がついたり消えたりするので、アニメーションの動きからpaddingとmarginの違いを確認しましょう。

例01：見出しの余白

見出し

paddingを付与・削除marginを付与・削除

• テキストと枠線の余白はpadding
• 見出しと画像の余白はmargin

が使われていることがわかりますね。

例02：ボックスの余白

さて、ここまででボックスモデルとpaddingとmarginの基本は理解できたと思うので実際にどのように書いていくのか解説していきます。

paddingとmarginの書き方

paddingとmarginの余白は上下左右の４つがあり「上だけにmarginをつける」「左右にだけpaddingをつける」「上下左右にmargin」をつけるということができます。

ということで例をもとにpaddingやmarginの書き方を見ていきましょう。

例1：見出しの余白をつける

余白適用前

見出し

こうしたい

見出し

<h1>見出しタイトル</h1>
<img src="cat">

h1{
  border-top:solid 2px; /*上線*/
  border-bottom:solid 2px; /*下線*/
  padding-top:10px; /*上の内側余白*/
  padding-bottom:10px; /*下の内側余白*/
  margin-bottom:20px /*下の外側余白*/
}

1. 見出しのテキストにborder-topとborder-bottomで線をつけます。
2. 見出しと線の上下（要素の内側）に余白をつけたいのでpadding-top:10pxとpadding-bottom:10pxを書きます。
3. 見出しと画像を離すために下側に余白であるmargin-bottom:20pxを書きます。

例2：ボックスの余白をつける

余白適用前

cat01

cat02

cat03

こうしたい

cat01

cat02

cat03

<div class="card">
  <p>cat01</p>
  <img src="cat01.png">
</div>
<div class="card">
  <p>cat02</p>
  <img src="cat02.png">
</div>
<div class="card">
  <p>cat03</p>
  <img src="cat03.png">
</div>

.card{
  background: #fbf4b3;
  border: solid 2px #ded57e;
  padding-top: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  margin-right: 5px;
  margin-left: 5px;
}

.card p{
  margin-bottom:10px;
}

1. テキストと画像を離すための余白を作りたいのでpにmargin-bottom:10pxと書きます
2. ボックスの内側に対して余白を作りたいので.cardのpaddingを上下左右にそれぞれ8pxつけます
3. ボックスを離すための余白を作りたいのでmargin-right:5pxとmargin-left:5pxで左右にそれぞれmarginをとります

paddingとmarginのつけ方を少しはイメージできたでしょうか？

ショートハンドで指定をまとめる

「例02」で紹介したような余白を上下左右につける際にpadding-top、padding-right、padding-left、padding-bottomといちいち書いていたら大変ですよね。

そういった指定をまとめて書くためのショートハンド（短縮系の書き方）がpaddingとmarginにはあります。

padding: 10px;

/*
内訳
padding-top: 10px
padding-right: 10px
padding-left: 10px
padding-bottom: 10px
*/

padding: 5px 10px 15px 20px;

/*
内訳
padding-top: 5px
padding-right: 10px
padding-left: 15px
padding-bottom: 20px
*/

padding: 5px 20px 10px;

/*
内訳
padding-top: 5px
padding-right: 20px
padding-left: 20px
padding-bottom: 10px
*/

padding: 10px 20px;

/*
内訳
padding-top: 10px
padding-right: 20px
padding-left: 20px
padding-bottom: 10px
*/

marginも同じルールでショートハンドを書くことができます。

paddingはどんな時に使う？２つのケース

『padding』はこんなときに使おう！

❶要素の範囲を広げたい時

❷要素内側に押し込めたい時

❶要素の範囲を広げたい時

見出しを広げる例

テーブルのセルを広げる例

このように要素の範囲を広げたい時はpaddingを使用します。

❷子要素を内側に押し込めたい時

ボックスの中に余白を入れる例

適用前

１匹目の猫

２匹目の猫

適用前

１匹目の猫

２匹目の猫

ボックスの中に余白を入れて子要素を押し込めたい時もpaddingを使いましょう。

marginはどんな時に使う？１つのケース

『margin』はこんなときに使おう！

❶別の要素と距離を取りたいとき

❶別の要素との距離を取りたい時

余白適用前

cat01

cat02

cat03

こうしたい

cat01

cat02

cat03

別の要素と距離を取りたいという時は基本marginを使うことを考えましょう。

なぜ要素を離すにはmargin？

なぜ要素同士を離す時にはmarginを使うのか？それにはしっかりとした理由があります。

• background-color（背景色）はボックスモデルの「要素」と「padding」につく
• borderはボックスモデルのborder部分（padding領域の外側）につく
• marginはボックスモデルのborderより外側につく（=背景色はつかない）

ブロック要素とインライン要素でmarginとpaddingのつき方が違うのでおさらいしておきましょう。

【小テスト】marginとpaddingどっち？

さて、ここからは先ほどまでで学んだ内容をもとに、「この場合paddingとmarginどちらを使う？」という形式で４問出題したいと思います。

paddingかmarginどちらになるか予測した上で「👉答えを見る」をクリックしてくださいね。

<div>
  <img src="dog01.jpg">
  <img src="dog02.jpg">
  <img src="dog03.jpg">
</div>

img{
  margin-right: 15px;
  margin-left: 15px;
}

<div>
  <h1>これは犬です</h1>
  <img src="dog.jpg">
</div>

h1{
  border-bottom: solid 3px;
  padding-bottom: 20px; /*線の内側に余白*/
  margin-bottom: 20px;  /*下に余白*/
}

背景色がついた箇条書きリストをそれぞれ余白をつけて離す場合なので注意です。

<ul>
  <li>箇条書きリスト</li>
  <li>箇条書きリスト</li>
  <li>箇条書きリスト</li>
</ul>

li{
  background-color: green;
  padding: 20px; /*背景色を含めて余白を広げる*/
}

<div>
  <img src="dog.jpg" alt="犬">
  <h3>DOG</h3>
  <h4>好きな食べ物</h4>
  <ul>
    <li>ささみ</li>
    <li>チーズ</li>
    <li>お芋</li>
  </ul>
</div>

div{
  padding: 40px;  /*パネルの内側に40pxの余白*/
}

h3{
  margin-bottom: 40px;  /*DOGの下に余白40px*/
}

記事のおさらいと確認をしよう

記事の内容がしっかり頭にはいっているか確認してみましょう。

Q.paddingとmargin、それぞれ内側と外側どちらに余白がつく？

paddingは内側、marginは外側

Q.border-topがついている<h1>にpadding-topをつけた場合、余白は線の上と下どちらにつく？

線の下（ボックスモデルでpaddingは線の内側、marginは線の外側につくため）

Q.background-colorがついている<h1>にpadding-topをつけた場合、背景色はどうなる？

paddingでつけた余白分広がる

Q.background-colorがついている<h1>にpadding-topをつけた場合、背景色はどうなる？

paddingでつけた余白の分だけ広がる

Q.paddingは〇〇したいときと、〇〇したいときに使う

要素の範囲を広げたい時、子要素を内側に押し込めたい時に使う

Q.marginは〇〇したいときに使う

別の要素との距離を取りたい時に使う

web兄さん

お疲れさまでした！全問正解できていましたか？時間をあけて記事を読み直すとより理解が深まっていると思いますよ！