CSSのpadding徹底解説!marginとの違いとは?

こんにちは! ライターのナナミです。

余白って大事ですよね。こうやって記事を書くときも、読みやすいように改行したりして余白を作るようにしています。もちろんWEBサイトも同じですね。コンテンツのまとまりがわかりやすいよう、余白を作りたいときがあると思います。

今回はコンテンツの余白を作る、paddingについてまとめました。ちょっと似ているmarginとの違いまで、バッチリ解説していきますよ!

この記事は下記の流れで進めていきます。

  • 【超基礎】要素の構造について
  • 【基礎】paddingとはなにか
  • 【基礎】paddingの使い方
  • 【発展】paddingを使うべきタイミング

綺麗に余白をとって、ユーザーが見やすいサイトを作れるようになっちゃいましょう!

要素の構造

paddingの説明をする前に、要素はどのような構造をしているのかを理解する必要があります。

box-sizing3

要素は、外側の領域、線の領域、内側の領域、コンテンツ領域で構成されています。外側の領域は、背景色を指定しても色がつかない部分です。線の領域は、borderを指定した時に線が引かれる部分です。

コンテンツ領域は文字や画像の領域です。そして内側の領域が、背景色がつき、paddingで余白を指定できる部分となります。

paddingとは?

paddingは、要素の内側の領域の余白を設定できるプロパティです。

padding2

marginとの違いも含め、細かく見ていきましょう!

要素の内側の余白を指定する

要素の内側とは、先ほど説明した要素の構造の、内側の領域のことです。コンテンツ領域と合わせて背景色がつき、見た目的に要素のひとまとまりに見える部分ですね。

padding3

この内側の領域とコンテンツ領域の間をどれだけ開けるのかを指定するのがpaddingです。

デフォルトでは幅や高さには含まれない

paddingで指定した余白は、幅や高さに含まれません。例えば幅200px、高さ100pxのコンテンツにpaddingを20pxとると…

padding4

指定された幅と高さはコンテンツ領域に指定され、そこにpaddingがプラスされる形になります。なので要素全体の大きさは幅240px、高さ140pxとなります。

ただし、これはデフォルトの設定の場合です。CSSでbox-sizingを指定すると、指定された幅と高さの内側にpaddingがつくようになります。

padding5

box-sizingについては、下記の記事で詳しく説明しています。ぜひ併せて読んでみてください。

CSSのbox-sizingで表示崩れをバッチリ解決する方法
更新日 : 2018年11月27日

marginとの違い

paddingと似たプロパティで、marginというものがありますね。marginも余白を指定するプロパティですが、こちらは外側の領域の余白を指定するものです。

padding6

この画像だと、文字と文字の間は同じくらい空いているように見えますね。

padding7

背景色をつければ一目瞭然。paddingでつけた余白には背景色がつきますが、marginの余白にはつきません。paddingは要素の内側、marginは要素の外側の余白です。使う際には、それぞれどの位置に余白がつくのかを意識するようにしましょう。

marginについてもっと知りたい!という方は、ぜひ下記の記事を読んでみてください。

paddingの指定方法

では、paddingの指定方法を見ていきましょう。基本形はこんな感じです。

CSS

セレクタ {
    padding:  余白の数値;
}

数値の部分に、どれだけ余白を入れるかを指定することができます。pxや%など、色々な単位を指定可能です。さらに、paddingは上下左右にバラバラに指定することも可能です。それぞれの指定を細かく見ていきましょう。

上下左右を一気に指定

padding8

上下左右の余白を一括で指定できる、一番汎用性の高いプロパティです。同じ値で統一して指定するだけでなく、上下左右バラバラに指定することもできます。

CSS

セレクタ {
    /* 4辺全て同じ値にする */
    padding:  余白の数値;

    /* 上下と左右で分けて指定 */
    padding:  上下の余白の数値 左右の余白の数値;

    /* 上と下と左右で分けて指定 */
    padding:  上の余白の数値 左右の余白の数値 下の余白の数値;

    /* 4辺バラバラの数値を指定 */
    padding:  上の余白の数値 右の余白の数値 下の余白の数値 左の余白の数値;
}

使ってみるとこんな感じになります。

padding8

HTML

<div class="padding_test">
    周りに余白を作ります。
</div>

CSS

.padding_test {
    width: 200px;
    background-color: #90ceff;
    padding: 10px 30px 60px 100px;
}

記述は一つですが、全てバラバラの余白に指定できましたね。上下左右の各辺を一個ずつ指定する場合は、下記のプロパティを使います。

各辺をそれぞれ指定する

paddingでは各辺を一気に指定できますが、さらに各辺それぞれに余白を指定できるプロパティがあります。

説明見栄え
padding-left要素の左側の余白だけを指定するプロパティです。padding-table1
padding-right要素の右側の余白だけを指定するプロパティです。padding-table2
padding-top要素の上側の余白だけを指定するプロパティです。padding-table3
padding-bottom要素の下側の余白だけを指定するプロパティです。padding-table4

paddingを使うタイミング

paddingとmargin、どう使い分ければいいんだろう…

それぞれの使い分け、ちょっと悩んでしまいますよね。そんな方のために、どんなときにpaddingを使うと良いか、逆に向いていないのはどんなときかをまとめました! 参考にしてみてくださいね。

線とコンテンツに余白を持たせたい

padding-ex1

このように枠線と文字が近すぎると、キュッとした印象で見づらいですね…

そんなときにはpadding! 線とコンテンツの間に余白をつけ、要素を見やすくすることができます。

padding-ex2

HTML

<div class="padding_test">
    周りに余白を作ります。
</div>

CSS

.padding_test {
    display: inline-block;
    border: solid 1px;
    padding: 20px;
}

要素の大きさを制御しつつ余白をもたせたい

要素の大きさをしっかり決め打ちしつつ、周りに余白をもたせたい…

そんなときもpaddingがベストです。box-sizingと組み合わせれば、簡単に実装できちゃいます。

padding-ex3

HTML

<div class="padding_test">
    高さ200px、幅200pxのままで余白をつけます。
</div>

CSS

.padding_test {
    display: inline-block;
    border: solid 1px;
    padding: 20px;
    width: 200px;
    height:  200px;
    box-sizing:  border-box;
    background-color: #80f1ff;
}

box-sizingについてもっと詳しく知りたい方は、下記の記事をどうぞ!

CSSのbox-sizingで表示崩れをバッチリ解決する方法
更新日 : 2018年11月27日

向いていないタイミング

要素の内側に余白をつけるので、隣あう要素との間を空けるのには不向きです。そんな時はmarginを使いましょう!

padding-ex4

いい感じに要素の間を空けられます。marginの使い方については、下記の記事で解説しています。

CSSのmarginとは?余白を指定するpaddingと何が違うのかまで徹底解説
更新日 : 2019年6月4日

まとめ

いかがでしたか?paddingをしっかり使えるようになれば、見やすく美しいWEBサイトも楽勝です。どんどん活用しちゃってくださいね!

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。