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

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

投稿日:

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

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

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のセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。
サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。
サムネイル

CSSのclamp()・max()・min()の使い方【プロ……

2023年01月16日
最終更新日:2023年03月10日
clamp()・max()・min()はCSSのプロパティの値の指定に利用できる比較関数です。複数の値を比較し1つの値を導きだし上限や下限を設定できます。
サムネイル

CSSのfont-feature-settingsの使い方【……

2023年01月16日
最終更新日:2023年03月10日
font-feature-settingsは、文字本来のサイズに応じてフォントの文字詰め(カーニング)を設定するためのプロパティです。