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

余白はウェブページを見やすく、そして美しく見せるためにとても大事なポイントです。今回は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の余白の考え方はボックスモデルと呼ばれます。

この図はbox-sizing: content-boxの場合です。このときwidthとheightは内容部分の大きさを指定します。border-boxではpaddingとborderも指定した幅・高さに含まれます。

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

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

まずpadding: 0の場合、このように要素は小さくなります。図のオレンジで塗られた部分＝背景色が塗られる範囲です。background: orangeに指定した場合をイメージしてください。

ではpadding: 10pxにしてみましょう。「これは要素です」という文字の上下左右に10pxずつ余白ができました。paddingで作られる余白にも背景色が塗られます。

border: solid 3px blackを追加してみました。borderを指定した場合はpaddingの外側に線が引かれます。

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

さらにmargin:10pxを指定してみます。すると、線の外側（＝要素の外側） 上下左右に余白が10pxずつ作られます。上下のmarginは前後の要素との余白になります。なおmarginは要素の外なので背景色では塗られません。

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

widthとheightはどこの指定？

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

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

図はbox-sizing: content-boxの例です。width: 200pxで左右のpaddingが10pxずつ、borderがなければ、要素の外寸は220pxになります。border-boxならpaddingは指定幅200pxに含まれます。

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

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

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

まずpaddingを指定するとできる余白はオレンジ色の部分になります。ここは背景色も塗られます。

線が引かれるのはpaddingの外側の部分ですね。もしpadding: 0であれば、線は画像にピッタリとくっつきます。

この画像もbox-sizing: content-boxの例です。この設定ではwidthにpaddingとborderは含まれません。border-boxを使えば両方を指定幅に含められます。詳しくは次の記事を参照してください。

あわせて読みたい【CSS】box-sizing:border-boxの使い方｜効かない時は？

marginを指定した場合には、線の周り（＝要素の外側）の余白が作られます。

なんとなくイメージが湧いてきたでしょうか。これから実際に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の値を%で指定する

ここまではpxで指定しましたが、marginとpaddingには％も使えます。上下方向の％指定も有効です。通常の横書きでは、上下方向の％も包含ブロックの横幅を基準に計算される点に注意しましょう。

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

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

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

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

では実例です。幅200pxの親要素の中で、子要素の幅を60％、左右のmarginを20％ずつにします。paddingとborderは0なので、横方向の合計は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: content-boxで、幅と左右のpaddingの合計を100％にした例です。この状態でborderを追加すると、その太さだけ外寸が大きくなります。borderの太さに％は使えませんが、box-sizing: border-boxにするなど、収め方はいくつかあります。

この図のように、padding+widthで横の合計が100%になっていても、左右のborderの太さ分 計6pxが右からはみ出てしまいます。

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

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

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

％の余白は、基準となる包含ブロックの幅に応じて変わります。たとえば基準幅が1000pxなら2％は20px、400pxなら8pxです。左右に最小・最大の余白も設けたい場合はclamp()などと組み合わせられます。

4.marginの相殺

通常のブロック配置では、縦方向に隣り合うmarginが重なることがあります。これをmarginの相殺（マージンの折りたたみ）といいます。左右のmarginや、flex・gridの子要素間では起こりません。

4-1. 縦方向のmarginが隣り合うとどうなる？

通常のブロック配置で、前の要素のmargin-bottomと次の要素のmargin-topが隣り合うと、2つは足し算されず、1つの余白に折りたたまれます。

図は通常のブロック配置で、隣り合う縦方向の正のmarginが折りたたまれる例です。すべてのmarginが重なるわけではありません。

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

両方が正の値なら、大きい方が要素間の余白になります。たとえば前の要素のmargin-bottom: 10pxと次の要素のmargin-top: 20pxなら、間隔は20pxです。負のmarginを含む場合は計算が異なります。

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

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

親子の縦方向のmarginも、間にborder・paddingなどがない条件では折りたたまれることがあります。図のように両方が正の値で10pxと40pxなら、外側に現れる余白は40pxです。

折りたたみは、縦方向のmarginが隣り合い、分離するborder・padding・行ボックスなどがない場合に起こります。正の値だけなら最大値が残り、負の値を含む場合は計算が変わります。

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

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

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

autoはmarginには指定できますが、paddingには指定できません。左右のmarginをautoにすると、条件が合うブロック要素を中央に配置できます。

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

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

左右のmarginをautoにすると、通常のブロック配置で余った横幅が左右に配分されます。要素に親より小さい幅を指定した例で確かめましょう。上下のmarginを0にするなら、先ほどの2値の書き方でmargin: 0 autoと書けます。

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

.parent {
  /*親要素は灰色で塗る*/
  background: silver;
  /*親要素の幅を250pxに*/
  width: 250px;
}
.parent p {
  /*上下は0、左右の余白は自動配分*/
  margin: 0 auto;
  /*中央配置する横幅は50pxにしておきます*/
  width: 50px;	
  background: orange;
}

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

5-2. 通常のブロック配置では上下中央にならない

通常のブロック配置では、上下のmarginをautoにしても縦中央には配置されません。flexやgridのレイアウトでは、余った縦方向の空間をautoのmarginで配分できる場合があります。

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

padding: 0 autoは無効な指定です。paddingではこの中央寄せはできません。ほかの中央寄せ方法は次の記事で解説します。

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

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