CSSのmarginとは？paddingとは？余白の指定方法まとめ

1. CSSのmarginとpaddingとは？

CSSでは要素のまわりの余白をmargin（マージン）とpadding（パディング）というプロパティで指定します。

CSSはセレクタ・プロパティ・値の3つから書かれます。marginとpaddingはこの中のプロパティにあてはまります。

1-1.marginとpaddingの違いは？

どちらも要素のまわり余白を指定するものですが、以下のような違いがあります。

といってもなかなかイメージが湧かないと思うので、図解していきます。

1-2. CSSの余白の考え方（ボックスモデル）

CSSでの余白の考え方は下図のようになります。

要素の中身（内容）があり、そのまわりの余白がpaddingです。そのまわりにはborder（線）があり、それより外側の余白がmarginです。

「オレンジ色の部分」と「線の部分」が合わせて要素全体になります。その外側のmarginは要素外の余白なわけですね。この図のようなCSSの余白の考え方はボックスモデルと呼ばれます。

1-3.pタグの文章の場合

理解を深めるために、もう少し具体的な例で考えてみましょう。例えば<p>これは要素です</p>という要素の余白はどのようになるのでしょうか。

このborderまでが要素内になります。

前後の要素とのmarginについては少し複雑なルールがあるので後ほど取り上げます。

widthとheightはどこの指定？

CSSにはwidthとheightというプロパティがありましたね。

参考

CSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう

もしwidthとheightを指定した場合、さきほどの図のどの部分の大きさが変わるのでしょうか。

このように一口に余白と言っても、内側か外側かなどの違いがあるわけですね。

1-4.画像(img)の場合

少しくどいですが、重要な部分なのでもう１つ例を紹介します。今度は「画像（imgタグ）に対して余白を設定するとどうなるか」を見てみましょう。 さきほどと余白のルールは全く同じです

widthとheightで指定するのは画像自体の幅と高さになります。つまりpaddingとborderはwidthで指定する幅の中には含まれません。 含ませるようにする方法もあります。詳しくは以下の記事を読んでみてください。

【CSS】box-sizing:border-boxの使い方｜効かない時は？

なんとなくイメージが湧いてきたでしょうか。これから実際にmarginとpaddingの書き方について紹介していきます。

2. marginとpaddingの書き方

これからCSSでのmarginとpaddingの指定の仕方について書いていきます。

2-1. 上下左右のmargin・paddingをまとめて指定

上下左右のmargin・paddingをまとめて指定したいときは、以下のような形で値を書きます。

{margin: 10px}{padding: 10px}

実際に試してみましょう。3つの段落要素(p)を作り真ん中の要素の余白だけを変えてみます。

<p class="above">前の要素</p>
<p class="middle">要素</p>
<p class="under">後の要素</p>

.middle {
  /*真ん中の要素*/
  background: orange;
  padding: 10px;
  margin: 10px;
}
.above {
  background: skyblue;
}
.under {
  background: silver;
}

2-2. 上下左右の一部だけ指定

「上だけ変える」や「右だけ変える」というような指定をすることもできます。上下左右の余白を個別に変えたいときはプロパティ名を以下のようにします。

たとえば要素の下の余白だけを10pxに指定したいときは以下のように書きます。 {margin-bottom: 10px}

実際に試してみましょう。今回も3つの要素のうち真ん中の要素の余白だけを変えてみます。paddingは左にだけ、marginは上にだけ指定します。

<p class="above">前の要素</p>
<p class="middle">要素</p>
<p class="under">後の要素</p>

.middle {
  /*真ん中の要素*/
  background: orange;
  padding-left: 20px;
  margin-top: 20px;
}
.above {
  background: skyblue;
}
.under {
  background: silver;
}

2-3. 上・右・下・左の余白をまとめて指定

上下左右の余白に別々の値を指定したいときに「margin-bottom:◯◯px; margin-left:◯◯px…」というようにいちいち書いていくのは面倒ですよね。そんなときは、以下のように上下左右の値をまとめて指定しましょう。 {margin: 20px 10px 5px 0px}＝順番に上、右、下、左のmarginの値＝ 上のmargin: 20px、右のmargin: 10px、下のmargin: 5px、左のmargin: 0

4つの値を半角スペースで区切って書きます。すると、上から時計周りで余白の値を指定することができます。なかなか覚えるのが大変ですが「上から時計回り」と頭に入れておきましょう。実際に試してみます。3つの要素のうち真ん中の要素をmargin、paddingともに「下」と「左」だけ20pxにします。

<p class="above">前の要素</p>
<p class="middle">要素</p>
<p class="under">後の要素</p>

.middle {
  /*真ん中の要素*/
  background: orange;
  /*下と左だけ*/
  margin: 0 0 20px 20px;
  /*下と左だけ*/
  padding: 0 0 20px 20px;
}
.above {background: skyblue}
.under {background: silver}

2-4. 上下と左右の余白をまとめて指定

上下セット、左右セットで値を指定することもできます。「上下は10pxで、左右は0」や「上下は5pxで、左右は10px」のようにまとめて指定ができるわけですね。知っておくとけっこう便利な指定方法です。 書き方は以下のようになります。{margin: 10px 0} ＝上・下のmargin:10px、左・右のmargin:0

はじめに上下の余白を書き、半角スペースを空けてから左右の余白を書きます。実際に試してみましょう。真ん中の要素のmarginは上下だけ20px、paddingは左右だけ20pxにしてみます。

<p class="above">前の要素</p>
<p class="middle">要素</p>
<p class="under">後の要素</p>

.middle {
  /*真ん中の要素*/
  background: orange;
  /*上下だけ*/
  margin: 20px 0;
  /*左右だけ*/
  padding: 0 20px;
}
.above {
  background: skyblue;
}
.under {
  background: silver;
}

ここまで4つの書き方を紹介してきました。「こういうときは絶対にこの書き方をしなければならない！」という決まりはありませんが、効率よく余白を指定できるように幅広く書き方を覚えておくと良いでしょう。

3. marginとpaddingの値を%で指定する

ここまで挙げてきた例では、marginとpaddingをpxで指定してきましたが、%で指定することもできます。 %指定は基本的に左右の余白を指定するときに使い、上下の余白を決めるときにはほとんど使いません。

3-1. %指定の考え方と計算

説明の前に少し予備知識を。

予備知識ここからの説明では「親要素」という言葉を使います。タグAがタグBではさまれているとき「Aの親要素＝B」です。

marginやpaddingを%で指定するときは、以下の図のように考えましょう。

それでは実際に試してみましょう。divで親要素を作り、その中に段落要素（p）を入れます。この段落要素のmarginを左右20%ずつ、widthを60%（計100%）に指定してみます。

<div class="parent">
 <p>これは例文です</p>
</div>

.parent {
  /*親要素は灰色で塗る*/
  background: silver;
  /*親要素の幅を200pxに*/
  width: 200px;	
}
.parent p {
  width: 60%;
  /*左も右も20%ずつ*/
  margin: 0 20%;
  /*今回はpaddingはゼロに*/
  padding: 0;
  background: orange;
}

このように%で余白と幅を指定することができます。

3-2. borderを加えたいときにはどうするべきか

ここまでの%指定の話の中にはborderが出てきませんでした。もしmargin・padding・widthを%指定しているときに、borderを加えたいときはどうなるのでしょうか。

borderは%指定できない

box-sizingでborderの太さ分がはみ出ないようにしよう

このようなときはbox-sizingと呼ばれるプロパティの指定を少し変えると簡単に対応ができます。くわしくはこちらで丁寧に解説しています。是非目を通してみてください。

【CSS】box-sizing:border-boxの使い方｜効かない時は？

3-3. %指定の使いどころは？

marginやpaddingの%指定は、レスポンシブデザインを作るときにとても便利です。※ レスポンシブデザイン：スマホで見てもPCで見ても、文字や画像がちょうどいい大きさで表示されるようなデザインのこと例えば、ある要素のmarginを左右20pxずつに指定したとします。すると『ウェブページをPCで見るとちょうどいい余白だけど、スマホで見ると20pxは大きすぎる…！』なんてことが起こってしまうかもしれません。そこでmarginを2%に指定すれば、ページを見る端末が1000pxのサイズなら余白は20pxに、400pxのサイズなら余白は8pxに…というようなことができるわけです。

4.marginの相殺

要素が前後に並び、そのそれぞれにmarginが設定されているとき、marginの相殺という現象が起こります。これがCSSの余白設定を分かりづらくしている元凶の１つです。

4-1.margin指定が複数並ぶと１つしか適用されない

たとえば要素1のmargin-bottomと、その後ろの要素2のmargin-topが並ぶと片方のmarginが無効になります。

適用されるmarginは値が大きい方

どちらが生き残るかというと、値が大きい方のmarginが生き残ります。たとえば、前の要素のmargin-bottom: 10pxとmargin-top: 20pxが重なったときには20pxのmargin-topの方が適用されます。

4-2.親要素ともmarginの相殺は起こる

厄介なことに親要素のmarginとの間でも相殺は起こります。

この場合でも前の要素とのmarginが大きくなる方のみが生き残ります。分かりづらいですが、「marginが並ぶとそのうちの１つしか適用されない」、また「要素間の余白が最も大きくなるmarginが適用される」のだと覚えておきましょう。

4-3.paddingでは相殺は起こらない

なお、この現象が起こるのはmarginだけです。前後の要素や親要素とpaddingが並んでも相殺は一切起こりません。また、paddingとmargin間でも相殺は起こりません。

5.要素を左右中央配置にするテクニック

marginとpaddingでは◯◯pxや◯◯%ではなく「auto」という値を指定することもできます。autoは「状況に応じて自動で値を調整する」というものですが、marginでこれをうまく活用すれば要素を中央配置することができます。

要素の中央配置

今回紹介するのは、display: blockの要素を中央寄せする方法です。display: inlineの要素の場合は、text-align: centerの指定により中央寄せができます。詳しくは以下の記事を読むと分かるはずです。

【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

5-1. marginを活用して中央配置する

{ margin-left: auto; margin-right: auto; }

このように左右のmarginの値をautoに指定することで、右側と左側のmarginが等しくなり、結果として要素が中央寄せになります。このとき、margin-topとmargin-bottomの値はいくつでもOKです。上下のmarginは0にしたい場合はさきほどの書き方に習って{margin: 0 auto}というように一文で表現できますね。実際に中央寄せを試してみましょう。divを親要素として、その中の段落要素（p）を中央寄せしてみます。

<div class="parent">
 <p>例文</p>
</div>

.parent {
  /*親要素は灰色で塗る*/
  background: silver;
  /*親要素の幅を250pxに*/
  width: 250px;
}
.parent p {
  /*中央配置の呪文(上下は0pxに)*/
  margin: 0 auto;
  /*中央配置する横幅は50pxにしておきます*/
  width: 50px;	
  background: orange;
}

このようにmargin-leftとmargin-rightの値をautoにすることで、中央寄せができます。ウェブサイトを作るときによく使うテクニックなので覚えておきましょう。

5-2. margin: autoで上下中央配置はできない

ちなみに上下のmarginをautoに指定しても、上下中央配置にはなりません。このテクニックで中央寄せできるのは、あくまでも水平方向だけです。

5-3. paddingで中央寄せはできない

また、padding: 0 autoとしてもこのような中央寄せはできません。marginだけでできるテクニックだと思っておきましょう。中央寄せの方法のついては、下の記事でくわしく解説しています。

CSSで中央寄せする9つの方法（縦・横にセンタリング）

6.marginとpaddingの使い方まとめ

最後にここまでの解説のポイントをまとめておきます。