paddingとmarginの違いをできる限り難しい言葉を使わず説明してみた

CSSを勉強し始めて必ずぶつかるプロパティ「margin」と「padding」はどちらも余白を調整するためのプロパティですが、その違いが明確にわからず「この場合はどっちを使えばいいの?」と頭を悩まされることが多いですよね。

そんなCSS勉強中の人たちのために、できる限り難しい言葉を使わずにmarginとpadddingの使い分けを「見て理解できる」ように解説していきたいと思います。

はじめに

paddingとmarginで調べると難しい解説がたくさん出てきて、正直理解するのを放棄したくなりますよね。そのためこの記事ではあまりHTMLとCSSの仕様を深掘りせずに要点だけ抑えて解説していきます。

なので、最終的に「paddingとmarginをどう使い分けていくか」という点が理解できればOKです。

paddingとmarginはプロパティの1種

どこのなにをどのように変えるか

まず、marginとpaddingはともに「CSSのプロパティ」です。プロパティとはCSSの3つの要素である

  1. どこの = セレクタ
  2. 何を? = プロパティ
  3. 値 = どのように?」

何を?の部分です。

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

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

 marginやpaddingを使わないとどうなる?

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

 marginとpaddingは要素の余白

このようにmarginやpaddingを使うことで要素の余白を調整することができます。

要素とは?

本記事では画像や見出し、ブロックなどのことを「要素」と呼んでいます。この後も要素というキーワードは何度もでてきますが、わからなくても感覚的な理解で今はOKです。

ボックスモデルについて

さて、marginとpaddingをきっちり理解したいならボックスモデルをある程度理解しなければなりません。

難しく感じるのはこの部分だけ!

paddingとmarginを理解するにあたり難しく感じるのはこの「ボックスモデル」という概念だけ。これさえ理解してしまえばpaddingとmarginを使い分ける一歩手前までいくことができるよ!

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

HTMLのボックスモデル

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

実際のhtmlでボックスモデルを可視化した例

例を見るとわかるように見出しには上下に線がついていて、見出しと線の間に余白、見出しと画像の間にも余白があります。これらがボックスモデルで見るとどのようになっているか?というものが右の画像です。

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

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

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

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

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

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

ボタンを押して確認しよう

ボタンを押すことでサンプル余白がアニメーションでついたり消えたりするよ。それぞれ、どの箇所の余白がpaddingでどの箇所の余白がmarginなのか「見て」確認してみよう!

例01:見出しの余白

 

見出し

paddingを付与・削除marginを付与・削除
  • テキストと枠線の余白はpadding
  • 見出しと画像の余白はmargin

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

例02:ボックスの余白

 

Box
Box
Box
paddingを付与・削除marginを付与・削除
  • ボックスの内側の余白を広げる時はpadding
  • ボックス同士を離すときの余白はmargin

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

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

paddingとmarginの書き方

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

paddingとmarginは上下左右の4方向からつけられる

paddingの4方向

  1. padding-top(上の内側余白)
  2. padding-right(右の内側余白)
  3. padding-bottom(下の内側余白)
  4. padding-left(左の内側余白)

marginの4方向

  1. margin-top(上の外側余白)
  2. margin-right(右の外側余白)
  3. margin-bottom(下の外側余白)
  4. margin-left(左の外側余白)

ということで例をもとに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-topborder-bottomで線をつけます。
  2. 見出しと線の上下(要素の内側)に余白をつけたいのでpadding-top:10pxpadding-bottom:10pxを書きます。
  3. 見出しと画像を離すために下側に余白であるmargin-bottom:20pxを書きます。

数字の単位はまずpxから覚えよう!

paddingとmarginの値の単位はpx以外にもいくつかあるんだけど今回はpxだけで解説していくよ!この他の単位にいきなり手を出すと一気に難易度が上がってしまうから、焦らずにあくまで今回は基本をマスターすることを目標にしよう!

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

余白適用前

 

cat01

cat02

cat03

こうしたい

 

cat01

cat02

cat03

<div class="card">
  <p>cat01</p>
  <img src="cat01.png">
</div>
<div class="card">
  <p>cat01</p>
  <img src="cat02.png">
</div>
<div class="card">
  <p>cat01</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. テキストと画像を離すための余白を作りたいのでpmargin-bottom:10pxと書きます
  2. ボックスの内側に対して余白を作りたいので.cardのpaddingを上下左右にそれぞれ8pxつけます
  3. ボックスを離すための余白を作りたいのでmargin-right:5pxmargin-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 20px 10px;

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

上 右 下 左

padding: 5px 10px 15px 20px;

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

上下 左右

padding: 10px 20px;

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

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

インライン要素の余白について

HTMLのタグはブロック要素とインライン要素の2つに分かれていますよね。

ブロック要素とインライン要素とは?

ブロック要素とインライン要素の違い
違いを忘れたひとのために簡単におさらいします。ブロック要素は「hxタグ、pタグ、divタグ…など」でインライン要素は「aタグ、spanタグ…など」でしたね!

インライン要素の余白の解説に戻りましょう。実は、インライン要素は余白のつき方がブロック要素とは異るのです。

インライン要素の余白
aspanといったインライン要素は

  • paddingは左右は通常通り適用される。上下は広がるけど他の要素に影響を与えない。
  • marginは左右のみ適用される。上下は広がらない。

といった特徴があります。これを知っておかないと「paddingとmargin適用してるのになんで余白つかないの!?」という罠にかかってしまいます。

ただ、背景色は適用される

paddingが「上下は広がるけど他の要素に影響を与えない。」という部分の説明です。

 

インライン要素

background-colorはpaddingで広げた部分にも色がつくので、インライン要素に背景色をつけている場合はpaddingが広がっていることが確認できます。

ただ余白が広がっているのにテキストの位置はそのままで画像との距離がそのままになっていますね。

このようにインライン要素の上下のpaddingは広がりはするものの他の要素との間に余白がつきません。

インライン要素に対して上下のpaddingやmarginや適用するには?

それでもaタグやspanタグは使う頻度が高いのでpaddingやmarginが上下に適用できないと不便ですよね。

そんな時は要素に対して「display: inline-block」を適用しましょう。

<span>インライン要素</span>
<img src="cat">
span{
  display: inline-block;
  /*これで上下の余白が効くように!*/

  border-top:solid 2px;
  border-bottom:solid 2px;
  padding-top:10px;
  padding-bottom:10px;
  margin-bottom:20px;
}

 

インライン要素

display: inline-blockは指定した要素をインラインブロックというもの変更します。インラインブロックになるとインライン要素のルールを残したまま上下のpaddingとmarginを指定できるようになります。

とにかくインライン要素は「display: block」で上下の余白指定可能!

ブロック要素とインライン要素について深く説明すると今回のテーマから脱線してしまうので、いまは「インライン要素に上下のpaddingとmarginを指定するにはdisplay: inline-block」を使う!とだけ覚えておこう!

さて、ここまででだいぶ基本は固まってきたと思うので、ここからはどんな時にpaddingを使い、どんな時にmarginを使うのかをケースごとに確認して、実践で使用できるレベルまで落とし込んでいきましょう!

paddingはどんな時に使う?ポイントは2つ

paddingはこんな時に使う

point01:要素の範囲を広げたい時

見出しを広げる例

適用前

 

見出しテキスト

こうしたい

 

見出しテキスト

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

適用前

 

見出し セル
見出し セル
見出し セル

こうしたい

 

見出し セル
見出し セル
見出し セル

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

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

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

適用前

 

1匹目の猫

2匹目の猫

適用前

 

1匹目の猫

2匹目の猫

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

marginはどんな時に使う?ポイントは1つ

marginはこんな時に使う

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

余白適用前

 

cat01

cat02

cat03

こうしたい

 

cat01

cat02

cat03

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

なぜ要素を離すにはmargin?

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

予定外のことが起きないように 要素を離すにはmarginを使うように心がける!

背景色はpaddingの余白に対してもつきborderはpaddingの外側につくのでpaddingで他の要素との距離をとろうとすると後々書き直すはめになってしまうことがあります。

paddingかmarginどちらをつけるか迷ったら?

paddingとmarginどちらにするかという判断は数をこなしていくまでは難しいと思います。どちらにするか迷った時の解決方法を紹介します。

1

参考にしたいサイトで開発ツールを開く

参考となるサイトを開いて

  • mac:opt + command + i
  • windows:F12

で開発者ツールを開きます。

2

  • mac:command + shift + C
  • windows:ctrl + shift + C

で虫眼鏡ツールを選択状態にします。右上のメニューのアイコンが青色になっていたらOKです。

3

余白を確認したい要素を選択

paddingやmarginを確認したい要素を選択します。

4

ボックスモデルが表示される

画面の右下に左のような、その要素のボックスモデル情報が表示されます。

この要素は左にmarginが20pxついていることがわかりますね。

marginの相殺について

実はmarginにはもうひとつやっかいな考え方があります。それが「marginの相殺」です。

marginの相殺とは同一方向に重なったmarginが打ち消されることを言います。主に3つケースでmarginの相殺が起こるので例を見ながら理解していきましょう。

勉強を始めたばかりでこの考え方まで理解しようとするのは結構大変ですが、「marginの相殺」を理解していないと余白が思い通りに指定できない時に解決できないことがあります。イラストを使って極力わかりやすくしているのでまずは理解することにトライしてみてください。

Case01:要素が上下に並んでいる時

縦に要素が並んだ場合

上下に並んだ要素(兄弟要素)にそれぞれmargin-topmargin-bottomがある場合は「数字の大きなmarginだけ適用」されます。

例では要素02のmargin-bottom:10pxは無効化され、要素01のmargin-top:30pxのみ適用されます。

Case02:親要素と最初の子要素にmargin-topがある場合

親要素と最初の子要素にmargin-topがある場合

親要素と、その要素の最初の子要素にmargin-topが指定されている場合は「数字の大きい方のmargin-topだけが適用」されます。

例では子要素のmargin-topのほうが大きいので、margin-top:50pxのみ適用されます。

Case03:親要素と最後の子要素にmargin-bottomがある場合

親要素と最後の子要素にmargin-bottomがある場合

Case02と同じ考え方で、

親要素と、その要素の最初の子要素にmargin-bottomが指定されている場合は「数字の大きい方のmargin-bottomだけが適用」されます。

例では子要素のmargin-bottomのほうが大きいので、margin-bottom:50pxのみ適用されます。

marginの相殺が起こらないケース

marginの相殺は

  • ブロック要素(divとかとかhタグとか)
  • display:list-itemの要素(リスト要素)
  • display:tableの要素(テーブル要素)

の要素に対してのみ起こります。しかし、上記の要素であってもmarginの相殺が起こらないケースがあります。

marginの相殺が起こらないケース

case02とcase03では親要素と子要素の同一方向にmarginがあった場合、数字の大きいほうだけ適用されると説明しましたが、

  1. 親要素にテキストがある場合
  2. padding-top(またはbottom)がある場合

この2つの場合は子要素のmarginは親要素の内側で適用され、親要素のmarginに影響を与えません。

つまり例では親要素はmargin-bottom:20pxが適用され、子要素は親要素の中でmargin-top:30pxmargin-bottom:30pxが適用されます。

相殺が起こるのは「margin同士(左右以外)」だけ!

相殺が起こるのはmargin同士が並んだ時だけで「padding + padding」や「padding + margin」は相殺が起こらず、指定の通りの余白が適用されるよ!ちなみに「左右のmargin」も相殺は起こらないよ!

お疲れ様でした。ここまででpaddingとmarginの基本は終わりです。

もし記事が役にたったら(@webliker_info)のフォローもお願いします!

まだ勉強するやる気のある方はmarginを使ったテクニックを2つ紹介しているので見ていってくださいね。

おまけ01:marginを使った左寄せ・中央寄せ・右寄せ

中央寄せにしたい時

例えばボックスを中央に配置したい時はどのようにすればいいのでしょうか?

横幅600pxのボックスを1200pxのコンテナの真ん中に配置したいなら、margin-rightとmargin-leftにそれぞれ300pxを適用すればいいのですが、真ん中に寄せたい度に左右のmarginを計算していたらとっても面倒ですよね。

autoを使って余白を自動計算

<div class="container">
  <div class="box">Box</div>
</div>
.box{
  width:150px;
  height:150px;
  margin:0 auto;
  background:#7fc1d3;
  text-align:center
}

 

Box

値にautoと書くことで余白を自動で計算して適用させることができます。今回は左右の余白を自動計算したいのでmargin:0 autoと書きます。そうすることで左右のmarginが均等に取られboxが中央配置されます。

このautoを使用する時にの注意点が2つあります。

  1. ブロック要素であること
  2. width(or max-width)を指定する

この2つの条件を満たしてないとautoで自動的に余白を指定することはできません。

またmargin:auto中央寄せにできるのは左右方向だけで上下の中央寄せはまた別の方法があります。(※marginから話が脱線するので今回は割愛)

ボックスを左寄せ・右寄せにする

同じ容量でボックスを右寄せや左寄せにすることができます。HTMLはデフォルトで左寄せなので今回は右寄せの方法のみ紹介します。

<div class="container">
  <div class="box">Box</div>
</div>
.box{
  width:150px;
  height:150px;
  margin-left: auto;
  background:#7fc1d3;
  text-align:center
}

 

Box

右に寄せる場合は左の余白を自動計算で目一杯とればいいのでmargin-left:autoを指定します。

おまけ02:ネガティブマージン

marginを使ったテクニックの1つに「ネガティブマージン」というものがあります。簡単に言うと「marginの値にマイナスの数値を指定する」ということなのですが、覚えておくと便利なシーンがあります。

ただ、ネガティブマージンは高度な考え方なので今回はそんなものがあるということを頭の片隅に置いておいてもらえば大丈夫です。

ネガティブマージンを使うシーン

<div class="container">
  <h2>見出し</h2>
  <p>テキスト</p>
  <div>
    <p>テキスト</p>
  </div>
</div>
.container{
  padding:0 20px;
}

h2{
  /*マイナスの数値を指定*/
  margin:0 -20px;
}

実際のコードはこのようになります。

marginの左右に対してマイナス値を指定すると、要素がマイナス方向に引っ張られ広がります。

それを利用して親要素いっぱいに広がっているように見せることが可能になります。

ネガティブマージンについての詳細は「[CSS]ネガティブマージンの理解を深め、活用するテクニック集」をご覧ください。

paddingとmarginのおさらい

それではpaddingとmarginについて学習したことをおさらいして終わります。

  1. padding要素の内側margin要素の外側の余白
  2. 枠線(border)はpaddingの外側につく
  3. 「上 右 下 左」「上 左右 下」「上下 左右」などまとめて値を書くショートハンドがある
  4. paddingは要素の範囲を広げたい時、子要素を内側に押し込めたい時に使う
  5. marginは別の要素との距離を取りたい時に使う
  6. marginには同一方向の指定を打ち消す「マージンの相殺」という考え方がある
  7. margin:autoで左寄せ、中央寄せ、右寄せが簡単にできる

わからないことがあればTwitterまで

paddingとmarginをマスターすれば脱・初心者に一歩近くことができるよ!わからないことは@webliker_infoで受け付けています。Twitterでは記事の更新情報の他にwebデザイナー向けの有益な情報をツイートしているのでぜひチェックしてくださいね!

 

この記事を書いた人

web関連の勉強をしているみんなのために「とにかくわかりやすい記事」にこだわってwebスキルの情報を発信しています。フリーランスでデザイン・コーディング・webマーケティング(SEO)とweb全般のお仕事をしています。

この記事を読んだ人におすすめ

  • 【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

  • 【初心者向け】絶対パスと相対パスの違いをイラストを使って解説!

  • CSSのコメントアウトの書き方と制作現場での使用サンプルを紹介

  • リンクタグのCSSまとめ!リンクの色の変更やオシャレな装飾方法を紹介

  • あなたはいくつ知ってる?CSSのセレクタ40個を総まとめ【チートシート付き】

  • 【完全入門ガイド】cssの書き方をイラストを使って解説

記事をもっと見る +

目次を開く