HTML /CSSの初心者にとって、最初の壁になりやすいのが「marginとpaddingの違い」です。
いずれも「余白」を作るCSSプロパティのため、両者の使い分けに悩みますよね。しかし、marginやpaddingは使用頻度の高いプロパティのため、十分に理解せずにCSSの学習を先に進めると、後で挫折につながりかねません。
本記事では、主に「marginとpaddingの違い」について初心者向けに丁寧に解説します。この記事を読めば、marginやpaddingの違いをしっかり理解しつつ、正しくコーディングできるようになるため、ぜひ参考にしてみてくださいね！
- marginとpaddingの違いを理解できる
- marginとpaddingの使い方をマスターできる
なお本記事の内容を理解するためには、CSSの基本的な書き方について押さえている必要があります。もし自信がない場合には先に以下の記事で学びましょう。
CSSの基礎と書き方を学ぼう
プログラミング学習でこのような経験はありませんか？ これらの悩みは、学習環境を整えることで全て解決することができます。 ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。 条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。 少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
ただし、無料サービスの提供には参加者の数に制限があります。
目次
marginとpaddingはいずれも「要素の余白」を調整するCSSプロパティ
marginとpaddingは、いずれも要素の余白を調整するCSSプロパティです。
画像左の余白調整前の状態では、要素と要素が隙間なく敷き詰められています。一方、画像右のようにmarginやpaddingを指定すれば、要素に余白を作れます。
用語解説：要素
要素とはHTMLの開始タグと終了タグで囲われたまとまりを指します。下に用意したサンプルのレイアウトは、h1要素、img要素、p要素と3つの要素から構成されています。
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の内側の余白
厳密に表現するならば、上記のようになります。
そのためCSSを学び始めたばかりであれば、表示領域の外側に3つの領域（padding, border, margin）があることはあまり意識してこなかったかもしれません。これを機に「ボックスモデルを意識したコーディング」に取り組んでみてくださいね。
ボックスモデルについてさらに理解を深めるために、サンプルコードを用いて解説します。
div要素（クラス名：container）の中に、h1要素（クラス名：title）が一つ含まれたシンプルなレイアウトを用意しました。h1要素に、margin, padding, borderをそれぞれ指定します。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
上のレイアウトをボックスモデルに当てはめると、以下のようになります。
marginとpaddingの使い分け方
ボックスモデルについて理解できたところで、marginとpaddingの使い分け方を解説します。h1と画像のみのレイアウトを用意しました。
使い分け方が理解できるようにmarginとpaddingを別々に指定してみます。
marginを使うケース
まずh1にmarginを指定してみましょう。
このように「borderの外側に余白を作りたいとき」にはmarginを使います。
paddingを使うケース
次にh1に、marginの代わりにpaddingを指定してみましょう。
このように「borderと表示領域（ここではTITLEというテキスト）の間に余白を入れたいとき」にはpaddingを使います。
またpaddingの広がりとともに背景色も一緒に広がっている点にも着目しましょう。先に紹介したmarginを広げても背景色は広がりません。
marginとpaddingの使い分け方のまとめ
marginとpaddingの使い分け方について以下にまとめます。
- marginはborderの外側に余白を作りたいときに使用する
- paddingはborderと表示領域の間に余白を作りたいときに使用する
- paddingには背景色が付くが、marginには背景色がつかない
赤い点線のところに「見えないborder」が存在しています。
marginとpaddingの記述方法
marginとpaddingの使い分け方を踏まえたうえで、記述方法についても紹介します。marginとpaddingの記述方法はほぼ同じですので、両者を並行して解説します。
要素の四方に同じサイズの余白を作る方法
要素の四方に同じサイズの余白を作成するのはかんたんです。marginまたはpaddingに対し、余白を取りたい分だけpx単位で値を1つ指定するのみです。下のサンプルコードをご覧ください。
<div class="container">
<h1 class="title">TITLE</h1>
</div>.container {
width: 600px;
}
.title{
font-size: 24px;
text-align: center;
font-weight: bold;
border: 10px solid #363148;
padding: 20px;
margin: 20px;
}
四方に異なるサイズの余白を作る方法
四方に別のサイズの余白を作る際には、以下のプロパティを使います。
| marginに関するプロパティ | 指定内容 | paddingに関するプロパティ | 指定内容 |
| margin-top | 上方向のmarginを指定 | padding-top | 上方向のpaddingを指定 |
| margin-right | 右方向のmarginを指定 | padding-right | 右方向のpaddingを指定 |
| margin-bottom | 下方向のmarginを指定 | padding-bottom | 下方向のpaddingを指定 |
| margin-left | 左方向のmarginを指定 | padding-left | 左方向のpaddingを指定 |
これを図に表すと以下のようになります。
左方向かつ内側に余白を作りたいならば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をより短くスッキリと記述する方法を紹介します。
60種類の動画で、HTML/CSSを学べる無料のスクール
費用は一切かからないサービスです
ショートハンドを使って記述する方法
ショートハンドとは複数あるプロパティの指定を、一つのプロパティへまとめて書く手法です。marginやpaddingの指定をする際にもショートハンドを使用して、短縮したコードを書けます。
marginとpaddingでショートハンドを使用する場合、以下の3つのパターンによって記述方法が異なります。
- 上下と左右の値をセットで同じ値にする
- 左右のみセットで同じ値にし、上下は異なる値にする
- 四方の余白を異なる値に指定する
それぞれについて紹介します。
1. 上下と左右の値をセットで同じ値にする
上下と左右の余白をセットで同じサイズにしたい場合には、以下のように値を2つ指定します。
.title{
font-size: 24px;
text-align: center;
font-weight: bold;
border:10px solid #363148;
padding: 20px 40px; /*上下 左右*/
margin: 20px 40px; /*上下 左右*/
}
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つ記述します。
.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の指定を短いコードで書けます。
30日間でHTML/CSSが身に付く無料プログラミングスクール
費用は一切かかりません
％指定で余白を指定する方法
ここまでの解説では、marginとpaddingの値をpxで指定していましたが「％を使って指定する方法」もあります。ただしmarginやpaddingを「％指定」する場合には「親要素と子要素」の概念を知っておく必要があります。
HTMLを書くときにタグをタグで、はさんで書くことがありますよね。このとき挟んでいる方のタグを親要素、はさまれている方のタグを子要素と呼びます。下記のコードをご覧ください。
<div class="container"> <!--親要素-->
<h1 class="title">TITLE</h1> <!--子要素-->
</div>この場合、h1をはさんでいるdivが親要素、divにはさまれているh1が子要素にあたります。ここで％指定の話に戻りましょう。下のように％指定を使用すると、親要素の横幅に対する割合で余白のサイズが算出されます。
これをコードで表すと下記のようになります。
.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指定する場合、パソコンでは適しているように見えた余白幅が、スマホで閲覧してみると大きすぎると感じる場合があります。一方、％指定を使用すれば、親要素の幅に応じて割合で余白が変化します。パソコンで閲覧してもスマホで閲覧しても、画面幅に応じて適当な余白を取るように調整されるわけです。
borderを含むレイアウトで%指定を使用するケース
borderを含むレイアウトで、marginやpaddingを％指定する方法についても解説します。
borderは太さの％指定ができません。そのためborderを含むレイアウトでは、borderの太さの分だけ、子要素が親要素の外へはみ出してしまう問題が発生します。
このようにmargin, padding, widthの合計が100％になるように指定しても、borderの幅の分だけ親要素の外へはみ出してしまいます。はみだしを防ぐためには、box-sizing; border-box;を要素に指定します。
box-sizingとは要素の幅・高さに、paddingとborderを含めるかどうかを指定するプロパティです。値にborder-boxを指定することで、paddingとborderは要素のwidthとheightに含まれるようになります。これによりborderを含むレイアウトであっても、親要素からの子要素のはみ出しを防げます。
ただしこの方法では、以下のようにpaddingやborderの幅が広がるほど、表示領域の幅は狭まる点に注意が必要です。
box-sizing: border-box;は全称セレクタで指定する
box-sizing: border-box;は、下記のように全称セレクタを使って、全ての要素に一括で効かせる手法が一般的です。
*{
box-sizing: border-box;
}このように*（アスタリスク）をセレクタにすると、全要素へ同じ指定を適用させられます。
参考記事
【CSS】box-sizingにborder-boxを指定すると何が変化するかを分かりやすく解説
まとめ：marginはborderの外側、paddingはborderの内側に余白を作るプロパティ
この記事ではmarginとpaddingの違いや使い分け方について解説しました。marginとpaddingはいずれも「余白」を作る性質を持つプロパティだけに、違いを理解するのが難しい面があります。
ボックスモデル
marginとpaddingの違いを正確に捉えるためには、ボックスモデルの理解が欠かせません。
これを踏まえると、marginとpaddingは以下のように表せます。
- margin：borderの外側に余白を作りたいときに使用する。
- padding：borderの内側に余白を作りたい時に使用する。
このようにmarginとpaddingを正しく理解するためには、borderが境界になっている点を意識する必要があります。
margin,paddingのショートハンド
実際にmarginやpaddingをコーディングする際には、ショートハンドを使うと短いコードで効率的に記述できます。
①上下と左右の余白をセットで同じサイズにしたい場合
padding: 値1(上下) 値2(左右); margin: 値1(上下) 値2(左右);
②左右のみセットで同じサイズにし、上下は異なるサイズに余白を指定する場合
padding: 値1(上) 値2(左右) 値3(下); margin: 値1(上) 値2(左右) 値3(下);
③四方の余白を異なるサイズに指定する場合
padding: 値1(上) 値2(右) 値3(下) 値4(左); margin: 値1(上) 値2(右) 値3(下) 値4(左);
このように、ショートハンドをうまく使ってコーディングを進めてみましょう。ZeroPlus Mediaはあなたの学習を応援しています。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
