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

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

分かりづらいmarginとpaddingの意味や使い方について初心者の方でも分かるように図と例をたくさん用いて解説します。

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

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

.parent p < width: 60%; /*左も右も20%ずつ*/ margin: 0 20%; /*今回はpaddingはゼロに*/ padding: 0; background: orange; > 3-2. borderを加えたいときにはどうするべきか borderは%指定できない

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

box-sizingでborderの太さ分がはみ出ないようにしよう 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では相殺は起こらない

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

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

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

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

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

.parent < /*親要素は灰色で塗る*/ background: silver; /*親要素の幅を250pxに*/ width: 250px; >.parent p < /*中央配置の呪文(上下は0pxに)*/ margin: 0 auto; /*中央配置する横幅は50pxにしておきます*/ width: 50px; background: orange; > 5-2. margin: autoで上下中央配置はできない 5-3. paddingで中央寄せはできない

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

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

  • marginは要素の 外側 の余白
  • paddingは要素の 内側 の余白
  • 背景色が指定されている場合、padding内も背景色が塗られる
  • paddingとmarginは上下左右別々に指定する書き方とまとめて指定する書き方がある
  • paddingとmarginは%指定もできる⇒widthを含めて横の%合計が100%になるようにする
  • 【marginの相殺】marginが並ぶとそのうちの１つしか適用されない
  • 【marginの相殺】要素間の余白が最も大きくなるようなmarginが適用される
  • margin-leftとmargin-rightの値をautoにすることで要素を中央配置できる ただしdisplay: blockの要素のみ
HTML＆CSS入門 HTMLとCSSの勉強に必要なツールを用意しよう 初心者向けHTML入門：書き方の基本とタグの使い方 初心者向けCSS（スタイルシート）入門：基本的な書き方を総まとめ！ CSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう 【CSS】max-widthとmin-widthの使い方まとめ CSSのmarginとは？paddingとは？余白の指定方法まとめ 【CSS】displayの使い方を総まとめ！inlineやblockの違いは？ font-familyの書き方まとめ：CSSでフォント種類を指定しよう 【CSS】文字装飾の基本を総まとめ！初心者向けに解説 HTMLのリンク＜aタグ＞の書き方を初心者向けに解説 翻訳も AI にまるっとお任せ

AI翻訳ツール Nani !? ならネイティブ講師に教わるかのように自然な翻訳ができます。

サルワカについて サルワカくん 少し役立つ生活やインターネットの知識を分かりやすく解説していきます。 検索

© Copyright 2020 サルワカ All rights reserved.