ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】marginとpaddingの違いを初心者向けに丁寧に解説

【CSS】marginとpaddingの違いを初心者向けに丁寧に解説

HTML/CSS

2022/08/05

2023/06/02

CSSの学習を始めた人を悩ませるのが、marginとpaddingの使い分けについてです。

marginもpaddingも同じく、レイアウトに「余白」を設けるCSSプロパティのため、両者の違いを理解するのはやや難しいかもしれません。とはいえmarginやpaddingは使用頻度の高い、重要なプロパティです。

marginやpaddingを十分に理解せずにCSSの学習を先に進めると、後々上手くレイアウトが組めずに挫折してしまう可能性もあります。

この記事では、主に「marginとpaddingの違い」について解説します。記事後半では「marginとpaddingの書き方」についても紹介します。この記事を読めば、marginやpaddingの違いをしっかり理解しつつ、正しいコードが書けるようになるでしょう。

この記事で身につく内容

marginとpaddingの違いを理解できる

marginとpaddingの使い方をマスターできる

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

marginとpaddingは要素の「余白」を作成するプロパティ
marginとpaddingの違い
- ボックスモデルとは？
marginとpaddingの使い分け方
Web制作を独学で学ぶあなたへ
marginとpaddingの記述方法
まとめ

marginとpaddingは要素の「余白」を作成するプロパティ

marginとpaddingは要素間の余白を調整するCSSプロパティです。まずは下をご覧ください。

画像左側のデフォルトの状態では、要素と要素は隙間なく敷き詰められています。一方、画像右側のようにmarginやpaddingを指定すれば、要素に「余白」を生み出せます。

要素に隙間のないレイアウトでは、ユーザーにとって見づらい印象のWebサイトに仕上がる可能性が高まります。余白をうまく使いこなすことにより、見やすく情報が伝わりやすいWebサイトを作れるようになるのです。marginとpaddingでは余白を生み出す「領域」が異なるため、その違いについて次から解説します。

その前に要素やプロパティといった、CSSを書く上で欠かせない用語の意味についておさらいしましょう。

用語解説：要素要素とは開始タグと終了タグで囲われた、まとまりのことを指します。下に用意したサンプルのレイアウトは、h1要素、img要素、p要素と3つの要素から構成されています。

なおimg要素のように終了タグを必要としない要素もありますが、そういうものもあると思って覚えてしまいましょう。

用語解説：プロパティ

プロパティとは対象となる要素の「何を」変化させるのか指定するものです。下をご覧ください。

CSSの書き方の基本形で使用するのは、セレクタ・プロパティ・値の3つです。セレクタで「変化させたい要素」を選択し、プロパティと値で要素の「何をどれくらい」変化させるのかを指定します。

ここではh1をセレクタ、marginをプロパティとしているため、変化の対象になるのは「h1要素の余白」です。そしてmarginの値を20pxと記述しているため、余白のサイズは20pxに変更されます。

marginとpaddingの違い

まずmarginとpaddingの違いについて明確にしておきます。

margin:要素の外側の余白

padding:要素の内側の余白

余白を作る位置が要素の外側か内側なのかに応じて、marginとpaddingを使い分けます。要素の外側、内側という表現は少し曖昧な表現です。実はここがmarginとpaddingを正確に理解するのを難しくしているポイントです。

そこでmarginとpaddingをしっかり理解するうえで欠かせない、ボックスモデルという概念を深掘りしていきます。

ボックスモデルとは？

marginとpaddingを使い分けるためには、ボックスモデルという概念を理解する必要があります。ボックスモデルとは「HTMLにおける全ての要素は、四角い箱の中に収められている」という考え方です。

下の図をご覧ください。

HTMLの要素は4つの領域を持っています。

表示領域

要素の内側の余白（padding）

要素の外側の余白(margin)

paddingとmarginの境界線(border)

marginとpaddingの間には、borderという境界線があります。

先ほどmarginとpaddingの違いを、要素の外側か内側かの違いと表現しましたが、これはあいまいな表現です。正確に表現すると、

margin: ボックスモデルにおけるborderの外側の余白

padding: ボックスモデルにおけるborderの内側の余白

ちなみにmargin, border, paddingを指定しないデフォルトの状態では、いずれも値が「0」に指定されています。そのためCSSを学び始めたばかりであれば、表示領域の外側に3つの領域（padding, border, margin）があることは恐らく意識されてこなかったでしょう。ぜひこの記事をきっかけに、ボックスモデルを意識したコーディングを始めてみてくださいね。

ボックスモデルについてさらに理解を深めるために、サンプルコードを用いて解説します。div要素(クラス名：container)の中に、h1要素(クラス名：title)が一つ含まれたシンプルなレイアウトを用意しました。

<div class="container">
  　 <h1 class="title">TITLE</h1>
</div>

ここでh1要素のtitleクラスに、margin, padding, borderをそれぞれ指定します。

.container{
   　width: 30%;
}

.title{
　   font-size: 24px;
　   text-align: center;
  　 font-weight: bold;
　　　border:10px solid #363148;
　　　padding: 20px
     margin: 20px;
}

表示結果は以下のとおりになります。

上のレイアウトをボックスモデルに当てはめると、以下のようになります。

このようにボックスモデルを意識しながらpadding, margin, borderを指定することで、レイアウト調整がスムーズに行えるようになります。

marginとpaddingの使い分け方

ボックスモデルについて理解できたところで、marginとpaddingの使い分け方を解説します。下のレイアウトをご覧ください。

h1と画像のみのレイアウトを用意しました。使い分け方が理解できるようにmarginとpaddingを別々に指定してみます。

marginを使うケース

まずh1にmarginを指定してみましょう。

このように「borderの外側に余白を作りたいとき」にはmarginを使います。

paddingを使うケース

次にh1に、marginの代わりにpaddingを指定してみましょう。

このように「borderと表示領域（ここではTITLEというテキスト）の間に余白を入れたいとき」にはpaddingを使います。またpaddingの広がりとともに、背景色も一緒に広がっている点にも注目してください。marginと異なりpaddingは要素の内側にある余白のため、背景色や背景画像も表示されます。

marginとpaddingの使い分け方まとめ

marginとpaddingの使い分け方についてまとめました。

marginはborderの外側に余白を作りたいときに使用する。
paddingはborderと表示領域の間に余白を作りたい時に使用する。

borderを含まないレイアウトではpaddingとmarginの境界線が視認できないため、少し難しくなりますが考え方に変わりはありません。ボックスモデルを意識しながら、marginとpaddingを使い分けましょう。

Web制作を独学で学ぶあなたへ

marginやpaddingの使い分け方。理解するのはとても難しいですよね。Web制作を学ぶ上でほかにも難しい技術や概念が次々と現れます。もしかすると独学を続けていくことに、少し不安を感じているところかもしれません。現在Web制作を独学中のあなたへ、プログラミングスクール「ZeroPlus Gate」をおすすめします。

ZeroPlus Gateは30日間みっちりとWeb制作を無料で学べるサービスです。

用意されている教材は50本以上。わからないことはいつでも専属のメンターに相談できます。人に相談できる環境を持つことは、プログラミング上達の近道になりますxそしてZeroPlus Gateのカリキュラムへ本気で取り組めば、30日後には「ゼロからWebサイトを生み出す力」を手に入れられます。

お申し込みはZeroPlus公式サイトより受け付けております。

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

あなたのご参加、お待ちしております。

marginとpaddingの記述方法

marginとpaddingの使い分け方を踏まえたうえで、記述方法についても紹介します。marginとpaddingの記述方法はほぼ同じですので、両者を並行して解説します。

要素の四方に同じサイズの余白を作る方法

まずは以下のように四方に同じサイズの余白を作ってみましょう。

要素の四方に同じサイズの余白を作成するのは簡単です。marginまたはpaddingに対し、余白を取りたい分だけpx単位で値を1つ指定するのみです。下のサンプルコードをご覧ください。

.container{
　   width: 30%;
}

.title{
 　  font-size: 24px;
   　text-align: center;
   　font-weight: bold;
   　border:10px solid #363148;
   　padding: 20px;
   　margin: 20px;
}

四方に異なるサイズの余白を作る方法

四方に別のサイズの余白を作る際には、以下のプロパティを使います。

左方向かつ内側に余白を作りたいならばpadding-left、下方向かつ外側に余白を作りたい場合はmargin-bottomといった具合に、それぞれの方向に対応したプロパティを使用します。

四方に異なるサイズの余白を指定したサンプルコードを用意しましたのでご覧ください。

.title{
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    border:10px solid #363148;
    padding-left: 5px;
    padding-right: 10px;
    padding-top: 15px;
    padding-bottom: 20px;
    margin-left: 20px;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 5px;
}

このように四方の余白を異なるサイズで指定できます。しかしこの方法では、余白を指定する箇所が増えると、記述するコードが非常に長くなってしまいますよね。そこでmarginやpaddingをより短くスッキリと記述する方法を紹介します。

ショートハンドを使って記述する方法

ショートハンドとは複数あるプロパティの指定を、一つのプロパティへまとめて書く手法です。marginやpaddingの指定をする際にもショートハンドを使用して、短縮したコードを書くことができます。

marginとpaddingでショートハンドを使用する場合、以下の3つのパターンによって記述方法が異なります。

上下と左右の値をセットで同じ値にする

左右のみセットで同じ値にし、上下は異なる値にする

四方の余白を異なる値に指定する

それぞれについて紹介します。

1.上下と左右の値をセットで同じ値にする上下と左右の余白をセットで同じサイズにしたい場合には、以下のように値を2つ指定します。

padding: 値1(上下) 値2(左右);

margin: 値1(上下) 値2(左右);

.title{
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    border:10px solid #363148;
    padding: 20px 40px;
    margin: 20px 40px;
}

2.左右のみセットで同じ値にし、上下は異なる値にする左右のみセットで同じサイズにし、上下は異なるサイズに余白を指定するならば、以下のように値を3つ記述します。

padding: 値1(上) 値2(左右) 値3(下);

margin: 値1(上) 値2(左右) 値3(下);

.title{
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    border:10px solid #363148;
    padding: 20px 40px 10px;
    margin: 20px 40px 10px;
}

3.四方の余白を異なる値に指定する四方の余白を異なるサイズに指定する場合には、以下のように値を4つ記述します。

padding: 値1(上) 値2(右) 値3(下) 値4(左);

margin: 値1(上) 値2(右) 値3(下) 値4(左);

.title{
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    border:10px solid #363148;
    padding: 20px 40px 10px 30px;
    margin: 20px 40px 10px 30px;
}

このようにショートハンドを使用すれば、marginやpaddingの指定を短いコードで書くことができます。

％指定で余白を指定する方法

ここまでmarginとpaddingの値をpxで指定していましたが、実は％で指定する方法もあります。marginやpaddingを％指定する場合には、「親要素と子要素」の概念を知っておく必要があります。

用語解説：親要素と子要素HTMLを書くときに、タグをタグではさんで書くことがありますよね。このとき挟んでいる方のタグを親要素、はさまれている方のタグを子要素と呼びます。下記のコードをご覧ください。

<div class="container"> <!--親要素-->
    <h1 class="title">TITLE</h1> <!--子要素-->
</div>

この場合h1をはさんでいるdivが親要素、divにはさまれているh1が子要素にあたります。さて、marginとpaddingの％指定の話へと戻していきましょう。下のように％指定を使用すると、親要素の横幅に対する割合で余白のサイズが算出されます。

コードで表すと下記のようになります。

.container{
    width: 1000px;
}

.title{
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    background-color: #ff914d;
    padding-right:15%;
    margin-right:15%;
    padding-left:15%;
    margin-left:15%;
    width: 40%;
}

このとき注意するのは、width、margin、paddingの合計が100%になるように指定する点です。100％を超えてしまうと子要素が親要素をはみ出てしまいます。なおmargin、paddingの%指定はレスポンシブ対応が必要なWebサイトを制作する際に活躍します。

用語解説：レスポンシブ対応レスポンシブ対応とはパソコン・スマホ・タブレットなど、画面サイズの異なるデバイスでWebサイトを閲覧しても、最適なレイアウトで表示させる技術のことです。

marginやpaddingをpx指定した場合、パソコンでは最適に見えた余白幅がスマホで閲覧してみると大きすぎると感じる場合があります。そこで％指定を使用すれば、親要素の幅に応じて割合で余白が変化します。パソコンで閲覧してもスマホで閲覧しても、画面幅に応じて適当な余白を取るように調整されるのです。

しかし、親要素のwidthがpx指定されている状態では、marginやpaddingを％指定しても、表示する端末の画面幅によって余白の幅が変わることはありません。画面幅が変わっても、親要素の幅が固定されているためです。

画面幅に応じてmarginやpaddingの幅が変化するようにしておくためには、親要素の幅にも％を指定して、画面幅に応じて可変する状態にしておく必要があります。

borderを含むレイアウトで%指定を使用するケースborderを含むレイアウトで、marginやpaddingを％指定する方法についても解説します。

borderの特性として、太さの％指定ができない点が挙げられます。そのためborderを含むレイアウトでは、borderの太さの分だけ、子要素が親要素の外へはみ出してしまう問題が発生します。

このように、margin, padding, widthの合計が100％になるように指定しても、borderの幅分が、親要素の外へはみ出してしまいます。親要素からのはみだしを防ぐためには、box-sizing; border-box;を要素に指定する必要があります。

box-sizingとは要素の幅・高さに、paddingとborderを含めるかどうかを指定するプロパティです。下のようにbox-sizingの値にborder-boxを指定することで、paddingとborderは要素のwidthとheightに含まれるようになります。そのためborderを含むレイアウトであっても、親要素からのはみ出しを防げます。