• HOME > 
  • CSS > 
  • CSSのpaddingとmarginの使い分け【画像で解説】

CSSのpaddingとmarginの使い分け【画像で解説】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2022年01月09日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

paddingとmarginについて

HTMLのタグによってマークアップされた全ての要素は、それぞれの内側と外側に余白が設定できるようになっており、それらのサイズを指定するためのCSSのプロパティが「padding」と「margin」です。

両者は兄弟のように同じようなタイミングで同じような働きのために使われるので、使い分けが非常に難しいプロパティです。しかしwebサイトのデザインにおいて必ず使われるといっても過言でないプロパティなので、それぞれの持つ役割をしっかりと理解しておきましょう。

paddingとmarginの違い

どちらも余白のサイズを指定するプロパティなのですが、paddingは内側、marginは外側の余白を指定するために使用します。さて、外側はイメージしやすいかもしれませんが、テキストなどの要素において内側の余白というものがどこを指すのかはイメージしづらいかもしれません。

要素イメージ

borderプロパティで枠線を表示させてみると理解しやすいです。

枠線イメージ

内側の余白とは、この枠線と要素との間を指すものです。borderプロパティによる枠線の表示非表示に関わらず要素は枠組みの中に収められており、paddingは枠の内側(borderの中)、marginは枠の外(borderの外)を設定するものになります。

領域イメージ リンク先のサムネイル
CSSのborderプロパティの使い方

要素の4辺に線を表示させたい時に使用するプロパティです。下左右全て、もしくは指定した辺のみ表示させることも可能で、線の太さや色を指定することも出来ます。...【もっと読む】

paddingの使い方

要素の内側の余白であるpaddingは、pxや%を用いて値を指定します。

基本の記述の方法は以下のようになります。

CSS

.sample{
    padding:50px;
}

上記の記述では上下左右に同じサイズの余白が設定できますが、四角い枠内の上下左右それぞれに異なる余白のサイズを設定することも可能です。

paddingイメージ

以下のようにいくつかの記述の方法がありますので状況に合わせて使い分けが必要です。

上下左右に同じ値を指定する

この場合はpaddingに数値を一つ記述すればOKです。単位にはpxや%が使用できます。

CSS

.sample_padding1{
    padding:50px;/*上下左右に同じ値*/
}

HTML

<div class="sample_padding1"><p>要素1</p></div>

プレビュー

paddingイメージ

上下と左右に別々の値を指定する

この場合は、まず上下の値を記述し、半角スペースを空けて左右の値を指定することで一行でまとめることができます。

CSS

.sample_padding2{
    padding:50px 100px;/*上下 左右*/
}

HTML

<div class="sample_padding2"><p>要素2</p></div>

プレビュー

paddingイメージ

左右には同じ値、上下には別の値を指定する

この場合は、「上」「左右」「下」という順番で記述することで一行でまとめて指定できます。

CSS

.sample_padding3{
    padding:0px 100px 50px;/*上 左右 下*/
}

HTML

<div class="sample_padding3"><p>要素3</p></div>

プレビュー

paddingイメージ

上下左右に異なる値を指定する

上下左右そろぞれにすべて違う値を指定したい場合は、「上」「右」「下」「左」という順番で記述することで一行でまとめることができます。

CSS

.sample_padding4{
    padding:0px 100px 50px 50px;/*上 右 下 左*/
}

HTML

<div class="sample_padding4"><p>要素4</p></div>

プレビュー

paddingイメージ

上下左右のpaddingを個別に記述したい場合は、「padding-top」「padding-bottom」「padding-left」「padding-right」を使ってそれぞれ指定します。

CSS

/*一方向づつ指定する場合*/
.sample_padding5{
    padding-top:0px;/*上*/
    padding-right:10px;/*右*/
    padding-bottom:20px;/*下*/
    padding-left:30px;/*左*/
}

HTML

<div class="sample_padding5"><p>要素5</p></div>

プレビュー

paddingイメージ

marginの使い方

要素の外側の余白であるmarginもpaddingと同様に、pxや%を用いて値を指定します。

基本の記述の方法は以下のようになります。

CSS

.sample{
    margin:50px;
}

上記の記述では上下左右に同じサイズの余白が設定できますが、四角い枠内の上下左右それぞれに異なる余白のサイズを設定することも可能です。

marginイメージ

以下のようにいくつかの記述の方法がありますので状況に合わせて使い分けが必要です。

上下左右に同じ値を指定する

この場合はmarginに数値を一つ記述すればOKです。単位にはpxや%が使用できます。

CSS

.sample_margin1{
    margin:50px;/*上下左右に同じ値*/
}

HTML

<div class="sample_margin1"><p>要素1</p></div>

プレビュー

marginイメージ

上下と左右に別々の値を指定する

この場合は、まず上下の値を記述し、半角スペースを空けて左右の値を指定することで一行でまとめることができます。

CSS

.sample_margin2{
    margin:50px 100px;/*上下 左右*/
}

HTML

<div class="sample_margin2"><p>要素2</p></div>

プレビュー

marginイメージ

左右には同じ値、上下には別の値を指定する

この場合は、「上」「左右」「下」という順番で記述することで一行でまとめて指定できます。

CSS

.sample_margin3{
    margin:0px 100px 50px;/*上 左右 下*/
}

HTML

<div class="sample_margin3"><p>要素3</p></div>

プレビュー

marginイメージ

上下左右に異なる値を指定する

上下左右そろぞれにすべて違う値を指定したい場合は、「上」「右」「下」「左」という順番で記述することで一行でまとめることができます。

CSS

.sample_margin4{
    margin:0px 100px 50px 50px;/*上 右 下 左*/
}

HTML

<div class="sample_margin4"><p>要素4</p></div>

プレビュー

marginイメージ

上下左右のmarginを個別に記述したい場合は、「margin-top」「margin-bottom」「margin-left」「margin-right」を使ってそれぞれ指定します。

CSS

/*一方向づつ指定する場合*/
.sample_margin5{
    margin-top:0px;/*上*/
    margin-right:10px;/*右*/
    margin-bottom:20px;/*下*/
    margin-left:30px;/*左*/
}

HTML

<div class="sample_margin5"><p>要素5</p></div>

プレビュー

marginイメージ

paddingとmarginを合わせて使う

前述の通り全ての要素がそれぞれpaddingとmarginの余白も持ち合わせていますので、要素同士の位置を揃える際は意図した距離感になるよう注意が必要です。

areaイメージ

また、要素を囲んでいる親要素もpaddingとmarginによる余白部分を持っているので、親要素でpadding、子要素でmarginを指定すると以下のような状態になります。

padding_marginイメージ

まとめ

paddinとmarginをうまく指定することができなければ、均整の取れたレイアウトのWEBサイトを作成することはできません。それぞれの値は、一定のルールを設けてしてしていくことで統一感のあるレイアウトを構築することができます。

広告
広告

関連する記事

サムネイル

CSSでPNG画像に影を落とす方法【filterプロパティd……

2025年01月15日
CSSでドロップシャドウをつけるには? CSSで要素に影(ドロップシャドウ)を付ける手段としては「box-shadow」や「text-shadow(テキストの場 […]
サムネイル

CSSのfilterプロパティの関数の種類と効果をまとめ【フ……

2025年01月06日
最終更新日:2025年01月15日
IEのサポートが終了したので、これまで使う機会の少なかったfilterプロパティを改めて調べたところ、CSSでの表現の幅を広げてくれる画期的なプロパティだと気づ […]
サムネイル

CSSで写真にぼかし加工を加える方法【filterプロパティ……

2025年01月06日
CSSだけで写真をぼかせる? CSSのfilterプロパティのblur()関数を使うと、画像(要素)にぼかしを加えることができます。 画像編集ソフトを使うことな […]
サムネイル

CSSで写真の明るさ(明度)を調整する方法【filterプロ……

2025年01月06日
CSSだけで画像の明度を調整できる? CSSのfilterプロパティのbrightness()関数を使うと、画像(要素)の明るさを変更することができます。 画像 […]
サムネイル

CSSで写真のコントラストを変更する方法【filterプロパ……

2025年01月06日
CSSだけで写真のコントラストを調整できる? CSSのfilterプロパティのcontrast()関数を使うと、画像(要素)のコントラストを変更することができま […]
サムネイル

CSSで写真を白黒に変更する方法【filterプロパティgr……

2025年01月06日
CSSだけで写真を白黒にできる? CSSのfilterプロパティのgrayscale()関数を使うと、画像(要素)を白黒に変更することができます。 グレースケー […]
サムネイル

CSSで写真をセピアに加工する方法【filterプロパティs……

2025年01月06日
CSSで写真をセピアに加工できる? CSSのfilterプロパティのsepia()関数を使うと、画像をセピア色に変換できます。 画像編集ソフトを使うことなくCS […]