CSSの余白を極める!marginとpaddingの意味・違い・使い分け方を解説

marginとpaddingの考え方

余白はウェブページを見やすく、そして美しく見せるためにとても大事なポイントです。今回はCSS初心者にとって最大の難関である余白設定(marginとpadding)をマスターしましょう。図と例をたくさん出しながら1つずつ解説していきます。HTML&CSS中〜上級者の方は、必要に応じて読み飛ばして頂ければと思います。


前提知識

タグと要素

この記事では「要素」という言葉を何回も使います。要素というのは、<タグ>〜</タグ>のカタマリを表します。たとえば、<p>これは例文です<p>は1つの要素です。

1.CSSの余白の考え方【図解】

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

CSSの書き方の基本

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

1-1.ざっくりとmarginとpaddingとは?

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

  • padding:要素の内側の余白
  • margin:要素の外側の余白

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

1-2.余白の考え方(ボックスモデル)

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

ボックスモデル

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

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

widthとheightはボックスモデルのどこに

なお、要素に対してwidthとheightの値を指定した場合には、要素の中身の部分の大きさが変わります。

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

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

pタグでpadding:0の場合

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

padding:10pxの場合

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

ポイント

要素に背景色を指定しているとき、padding部分も背景色で塗られる

borderと余白の関係

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

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

marginの指定

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

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

widthとheightはどこの指定?

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

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

widthとheightの考え方

答えは要素の中身の部分です(図の点線部分)。width:200pxと指定したとして、paddingの余白はその200pxの中には含まれません。padding:10pxなら左右の10pxずつの余白+200pxで要素の幅は合計220pxになります。

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

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

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

画像のpaddingとmargin

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

borderが作られる場所

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

heightとwidth

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

marginはこの部分

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

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

2. marginとpaddingの書き方

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

どちらも書き方はまったく同じ

marginとpaddingは、書き方も指定することのできる値も全く同じです。セットで覚えてしまいましょう。

2-1. 上下左右をまとめて指定

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

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

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

HTMLコード
<p class="above">前の要素</p>
<p class="middle">要素</p>
<p class="under">後の要素</p>
CSSコード
.middle {/*真ん中の要素*/
	background: orange;
	padding: 10px;
	margin: 10px
	}
.above {background: skyblue}
.under {background: silver}
ブラウザ表示

前の要素

要素

後の要素

↑要素の内側と外側にはそれぞれ10pxずつ余白ができていますね。

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

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

  • 上だけ指定⇒ margin-top、padding-top
  • 下だけ指定⇒ margin-bottom、padding-bottom
  • 左だけ指定⇒ margin-left、padding-left
  • 右だけ指定⇒ margin-right、padding-right

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

上下左右の余白指定プロパティ

図にまとめるとこのようになります。組み合わせれば「上と右だけ余白調整」のようなこともできますね。

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

HTMLコード
<p class="above">前の要素</p>
<p class="middle">要素</p>
<p class="under">後の要素</p>
CSSコード
.middle {/*真ん中の要素*/
	background: orange;
	padding-left: 20px;
	margin-top: 20px
	}
.above {background: skyblue}
.under {background: silver}
ブラウザ表示

前の要素

要素

後の要素

↑paddingは左だけ、marginは上にだけ指定されているのが分かりますね。

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にします。

HTMLコード
<p class="above">前の要素</p>
<p class="middle">要素</p>
<p class="under">後の要素</p>
CSSコード
.middle {/*真ん中の要素*/
	background: orange;
	margin: 0 0 20px 20px;/*下と左だけ*/
	padding: 0 0 20px 20px;/*下と左だけ*/
	}
.above {background: skyblue}
.under {background: silver}
ブラウザ表示

前の要素

要素

後の要素

↑marginもpaddingも左と下にだけ20pxの大きさで指定されていますね。

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

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

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

HTMLコード
<p class="above">前の要素</p>
<p class="middle">要素</p>
<p class="under">後の要素</p>
CSSコード
.middle {/*真ん中の要素*/
	background: orange;
	margin: 20px 0;/*上下だけ*/
	padding: 0 20px;/*左右だけ*/
	}
.above {background: skyblue}
.under {background: silver}
ブラウザ表示

前の要素

要素

後の要素

↑marginは上下だけ20pxに、paddingは左右だけ20pxになりました。

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

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

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

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

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

親要素と子要素

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

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

marginとwidthとpaddingの%指定

%は親要素の幅に対する比率で計算されます。例えば親要素の幅(width)が1000pxの場合、40%=400pxになります。 親要素の幅が変われば%指定されているpaddingやmarginの幅も変わります。 %指定するときには、横の%の合計が100%になるようにします(でないとはみ出てしまいます)。「margin30%、padding30%、width40%」という具合ですね。 そのため「paddingを%指定したい」というときは、基本的にはmarginもwidhtも合わせて%指定する必要があります(でないと合計100%になりません)。

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

HTMLコード
<div class="parent">
 <p>これは例文です</p>
</div>
CSSコード
.parent {
	background: silver;
	/*↑親要素は灰色で塗る*/
	width: 200px
	/*↑親要素の幅を200pxに*/
	}
.parent p {
	width: 60%;
	margin: 0 20%;
	/*↑左も右も20%ずつ*/
	padding: 0;
	/*↑今回はpaddingは指定しません*/
	background: orange
	}
ブラウザ表示

これは例文です


↑ 左右に20%ずつ余白ができています。今回は親要素が200pxなので、marginは左右40pxずつになりますね。

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

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

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

borderは%指定できない

横の%合計は100にする必要がありますが、やっかいなことにborderの太さは%で指定することができません。とはいえborderだけをpxで指定しまうと、その分だけ親要素からはみ出てしまいます(これによりデザインが崩れてしまうかもしれません)。

borderのぶんはどうしたらよいか

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

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

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

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

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

参考

ページの内容全体を表すbody要素の幅は、pxで指定されていないとブラウザの幅になります。つまり、幅1200pxのブラウザでウェブページを見ればbodyの幅は1200pxに、幅400pxのスマホブラウザでページを見ればbodyの幅は400pxになるわけですね。そのため、ウェブページを開いたブラウザの幅に対して%指定をすることができるのです。

4.marginの相殺を理解しよう

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

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

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

要素が2つ並んだときのmarginの相殺

この図のように、marginが前後の要素のmarginと並ぶと、どちらか片方しか適用されなくなります。

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

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

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

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

marginの操作の説明

例えば親要素の上側のmarginが10px、親要素の中にある子要素の上側のmarginが40pxのとき、前の要素とのmarginには子要素からの40pxのmarginが適用されます。

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

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

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

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

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

要素の中央配置

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

5-1. 中央配置するための指定

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

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

HTMLコード
<div class="parent">
 <p>例文</p>
</div>
CSSコード
.parent {
	background: silver;
	/*↑親要素は灰色で塗る*/
	width: 250px
	/*↑親要素の幅を250pxに*/
	}
.parent p {
	margin: 0 auto;
	/*↑中央配置の呪文(上下は0pxに)*/
	width: 50px;
	/*↑中央配置する横幅は50pxにしておきます*/
	background: orange
	}
ブラウザ表示

例文


↑ オレンジ色の要素が中央寄せになりました。

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

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

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

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

また、padding: 0 autoとしてもこのような中央寄せはできません。marginだけでできるテクニックだと思っておきましょう。

6.まとめ

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

まとめ
  • marginは要素の外側の余白
  • paddingは要素の内側の余白
  • 背景色が指定されている場合、padding内も背景色が塗られる
  • paddingとmarginは上下左右別々に指定する書き方とまとめて指定する書き方がある
  • paddingとmarginは%指定もできる⇒widthを含めて横の%合計が100%になるようにする
  • 【marginの相殺】marginが並ぶとそのうちの1つしか適用されない
  • 【marginの相殺】要素間の余白が最も大きくなるようなmarginが適用される
  • margin-leftとmargin-rightの値をautoにすることで要素を中央配置できる ただしdisplay: blockの要素のみ
サルワカ