模写修行メディア

CSSで余白を作る方法!marginとpaddingについて解説!

CSSで余白を作る方法!marginとpaddingについて解説!

この記事をシェア:

コーディングの勉強を始めたばかりだと、marginとpaddingを使った余白の作り方は、難しいと感じる方もいるのではないでしょうか。

  • marginとpaddingの違いや使い分け
  • marginの細かい仕様

これらは特にややこしいと感じる方も多いと思います。

この記事では、marginとpaddingを使って余白を作る方法について、図解も交えて丁寧に解説します。

marginとpaddingの違い

プロパティ役割
margin外側の余白
padding内側の余白

どちらも余白を作るプロパティです。違いは、上の表のようになります。これ以降、この違いについて、図を使って分かりやすく解説します。

ボックスモデル

ボックスモデル

HTMLに書いた要素は上のようなボックスを作ります。これをボックスモデルと呼びます。

<p>親譲りの無鉄砲で小供の時から損ばかり…</p>

例えば、上のコードであればpタグの中身が、contentsになります。その外側にpadding → border → marginがあります。

  • borderまでがその要素
  • marginは要素の外側

上の点に注意です。このことから、paddingは内側の余白で、marginは外側の余白になることがわかります。

marginとpaddingの書き方

marginもpaddingも書き方は同じなので、paddingを例に紹介します。ただし、marginは色々とややこしい仕様があるので、その点は後述します。

marginとpaddingの書き方
p{
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

このように上下左右バラバラに指定することが出来ます。ただし、上の例のように全て同じサイズの場合は、省略して書けます。

p{
    padding: 10px;
}

これで4つバラバラに指定した場合と同じで、上下左右にpaddingが10px入ります。

marginも同じように、margin-top: 10px;margin: 10px;のような書き方をします。

ショートバンド

marginもpaddingもショートバンドという、省略して書く方法があります。


marginとpaddingのショートバンド
p{
    /* padding: 上下の値 左右の値; */
    padding: 10px 20px;
}

👆 上下が10px、左右が20pxになります。


marginとpaddingのショートバンド
p{
    /* padding: 上の値 左右の値 下の値; */
    padding: 10px 20px 30px;
}

👆 上が10px、左右が20px、下が30pxになります。


marginとpaddingのショートバンド
p{
    /* padding: 上の値 右の値 下の値 左の値; */
    padding: 10px 5px 30px 20px;
}

👆 上から時計回りで、上10px、右5px、下30px、左20pxになります。

marginとpaddingがどこに効くかサンプルで理解しよう!

デフォルトの見た目
<p class="text">小学校に居る時分学校の二階から…</p>
<p class="text02">親譲りの無鉄砲で小供の時から損ばかり…</p>
.text02{
    display: inline-block;
    background-color: rgba(197,171,95,.3);
}

どのコードがどこに効いているか理解するために、上の例にCSSのコードを追加していきます。ぜひ、一緒に手を動かしてみてください。

注意!
一緒に手を動かして検証したい方は、リセットCSSを読み込まず、表示確認はGoogle Chromで行ってみてください。解説と同じようになるはずです。

display: inline-block;を入れているのは、marginとpaddingを指定した場合の、見た目をわかりやすくするためです。つまり解説上の都合だけです。

順を追って違いを理解しよう

display: inline-block;がないと、text02は初期値のdisplay: blockが適応されて上の図のようになります。

paddingとmarginの使い分けをサンプルを使って解説!

paddingとmarginの使い分けについては別記事で、複数サンプルを用いて解説しています。

paddingを指定してみる

paddingを指定してみる
.text02{
    display: inline-block;
    background-color: rgba(197,171,95,.3);
    padding: 40px; /* 👈 追加 */
}

上下左右に40pxの内側の余白が入りました。paddingは内側の余白なので、背景も反映されます。

borderを指定してみる

borderを指定してみる
.text02{
    display: inline-block;
    background-color: rgba(197,171,95,.3);
    padding: 40px;
    border: 10px solid #333; /* 👈 追加 */
}

paddingの外側にborderが入りました。

marginを指定してみる

marginを指定してみる
.text02{
    display: inline-block;
    background-color: rgba(197,171,95,.3);
    padding: 40px;
    border: 10px solid #333;
    margin-top: 40px; /* 👈 追加 */
}

上の余白をmarginで空けました。marginは外側の余白なので、背景は入りません。今までピッタリくっついていた、上のテキストと40px余白が空きました。

widthとheightを指定してみる

widthとheightを指定してみる
.text02{
    display: inline-block;
    background-color: rgba(197,171,95,.3);
    padding: 40px;
    border: 10px solid #333;
    margin-top: 40px;
    width: 400px; /* 👈 追加 */
    height: 200px; /* 👈 追加 */
}
  • display: inline-block;を指定
  • widthとheightの指定しない

上の2つの条件下では、widthとheightはautoになり、contentsの大きさに応じて自動で決まります。

widthとheightで、width: 400px;height: 200px;のような、具体的なサイズを指定すると、contentsはそのサイズになります。


widthとheightを指定してみる

リセットCSSを使わない状態では、多くのブラウザでボックスのサイズは、上の画像のようになっているはずです。

500pxではなく、400pxになっている場合は、おそらくリセットCSSでbox-sizingの指定があると思います。box-sizingについては次に説明します。

box-sizingを指定してみる

box-sizingを指定してみる
.text02{
    display: inline-block;
    background-color: rgba(197,171,95,.3);
    padding: 40px;
    border: 10px solid #333;
    margin-top: 40px;
    width: 400px;
    height: 200px;
    box-sizing: border-box; /* 👈 追加 */
}

box-sizing: border-box;を追加することで大きさが小さくなったはずです。多くのブラウザでbox-sizingの初期値は、content-boxです。

box-sizingの値役割
content-box(初期値)paddingとborderを幅と高さに含めない
border-boxpaddingとborderを幅と高さに含める

border-boxcontent-boxの違いは、上の表のようになります。


💡 border-boxにした場合

box-sizingを指定してみる

border-boxは、paddingとborderを幅と高さに含めます。width: 400px;を指定した場合、contents・padding・borderを合わせて400pxになります。

従って、contents自体の幅は、上の画像のように300pxなります。

このセクションの冒頭で、『一緒に手を動かして検証したい方は、リセットCSSを読み込まずに...』と書いたのは、多くのリセットCSSではbox-sizing: border-box;が指定されているからです。初期値のcontent-boxからborder-boxに変更した時の変化を見てもらいたかったので、リセットCSSを読み込んで欲しくなかっただけです。


💡 リセットCSSでborder-boxが指定されている場合が多い

* {
  box-sizing: border-box;
}

/* もしくはhtmlやbodyに書いてあるかも */
html {
    box-sizing: border-box;
}

リセットCSSでは、上のように、ユニバーサルセレクタやhtmlやbodyに対して、box-sizing: border-box;が入っていることが多いです。

※ ユニバーサルセレクタに対しての指定は、すべての要素に効きます。

ここでは詳しく紹介しませんが、 border-boxになっていた方が、何かと便利です。


💡 border-boxを指定しないとこんなことに...

.text02{
    display: inline-block;
    background-color: rgba(197,171,95,.3);
    padding: 40px;
    border: 10px solid #333;
    margin-top: 40px;
    width: 100%; /* 👈 100%に変更 */
    height: 200px;
    /* box-sizing: border-box; */
}

box-sizing: border-box;をコメントにして、width: 100%;に変更しました。こうすると、contentsの幅100%に加え左右のpaddingの80px分もあるので、100%をオーバーします。結果、横にはみ出してしまうので注意が必要です。

marginとpaddingに使える単位

marginとpaddingには、px / em / rem / % / vw などの単位が使えます。これらの単位については、いつか別記事で紹介します。

まずは、直感的にわかりやすいpxと、よく使われる%だけ使えるようにすると良いです。pxは今までの解説で使ってきたので、%の紹介をします。

%は相対値なので、何かを基準にその何%かになります。marginとpaddingの場合、親要素の横幅が基準になります。

何が基準になるかは、プロパティによって変わります。例えば、height: 20%;のようにheightを%指定した場合は、親要素の高さが基準です。font-size: 80%;のようにfont-sizeを%指定した場合は、親要素のfont-sizeが基準です。

%指定の具体例

marginとpaddingに%を使った時の図
<div class="container">
    <div class="box"></div>
</div>
.container{
    width: 1000px;
}

.box{
    ...
    padding: 2%; /* 👈 1000px × 2% = 20px */
    margin: 5%;  /* 👈 1000px × 5% = 50px */
}

marginとpaddingは、上のような計算で決まります。

レスポンシブでサイト制作をすることが当たり前になった現在、余白を%指定することはよくあります。

余白を作る方向は統一すると良い

  • 上下の余白は上に入れるようにする
  • 左右の余白は左に入れるようにする

このように、余白を作る方向は統一しておいた方が良いです。

例として、上と左にしましたが、統一されていれば下と右でも大きな問題はありません。ただし、上と左にすると隣接セレクタが使える点は便利です。

<li class="menu-item">メニュー01</li>
<li class="menu-item">メニュー02</li>
<li class="menu-item">メニュー03</li>
...
<li class="menu-item">メニューn</li>
.menu-item + .menu-item{
    margin-top: 10px;
}

例えば、このように書けば1番上の要素の上には10pxの余白は空きません。:first-childを使って、打ち消しをする必要がなくなります。

.menu-item + .menu-item{
    margin-left: 10px;
}

メニューを横並びにして、メニュー同士の横の余白を取りたい時も、同じようにスッキリ書けます。

marginの相殺

marginには、『marginの相殺』という仕様があります。

marginの相殺が起こるのは上下の余白のみです。左右では起こりません。また、paddingでは上下左右で起こりません。

marginの相殺が起こる具体例を2つ紹介します。

ここで紹介する具体例以外にも、marginの相殺が起こるケースや、例外的に起こらないケースもあります。

marginの相殺が起こる3つのケースと例外を紹介!

marginの相殺について、もっと詳しく知りたい方は、上の記事をご覧ください。

兄弟要素の下上のmargin

兄弟要素の下上のmarginの相殺
<p class="text">小学校に居る時分学校の二階から…</p>
<p class="text02">親譲りの無鉄砲で小供の時から損ばかり…</p>
.text{
    margin-bottom: 40px;
}

.text02{
    margin-top: 30px;
}

この場合、40px + 30px = 70pxの余白が空くわけではなく、大きい方の40pxだけが効きます。ただし、下のようにするとmarginの相殺は起こりません。

.text{
    margin-bottom: 40px;
}

.text02{
    margin-top: 30px;
    display: inline-block;
}

片方もしくは両方がdisplay: inline-block; / display: inline-flex; / display: inline-grid;だとmarginの相殺は起こりません。

display: inline;にした場合、marginの相殺が起こっているように見えますが、これはmarginが効いていないだけです。詳しくは後述します。

親と子の同じ方向ののmargin

親と子の同じ方向ののmarginの相殺
<div class="parent">
    <div class="child">小学校に居る時分学校の二階から…</div>
</div>
.parent{
    margin-top: 40px;
}

.child{
    margin-top: 80px;
}

このケースも大きい方だけが効きます。ただし親(.parent)にpaddingもしくはborderが入ると、marginの相殺は起こらず、40px + 80px = 120pxの余白が入ります。

上方向のmarginを例にしましたが、下方向でも同じようにmarginの相殺がおこります。

marginを使ったテクニック

marginを使ったよく使うテクニックを紹介します。

左右の余白を均等にする(中央配置する)方法

左右の余白を均等均等にする(中央配置する)方法
<div class="box"></div>
.box{
    ...
    margin: 0 auto;
}

margin: 0 auto;を使うと、中央配置することが可能です。これはかなり使います。

もし.boxdisplay: inline;display: inline-block;が指定してあった場合は、中央配置にはなりません。

.box{
    ...
    margin-left: auto;
    margin-right: auto;
}

左右のmarginがautoであれば良いので、上のように別々に指定しても良いです。

CSSで中央揃えする方法まとめ!これさえ覚えればOK!

上の記事で中央揃えする色々な方法を紹介しています。

右寄せする方法

右寄せする方法
<div class="box"></div>
.box{
    ...
    margin-left: auto;
}

margin-left: auto;にすると、ボックスが右寄せになります。

ネガティブmargin

ネガティブmargin
<div class="card">
    <div class="card-img">
        <img src="..." alt="..." width="..." height="...">
    </div>
    <h2 class="card-title">余白の勉強</h2>
</div>
.card-img{
    ...
}

.card-title{
    ...
    margin: -40px auto 0;
    width: 70%;
}

例えば、上のようにネガティブmarginを使うと、食い込んだ?ような見た目に出来ます。


💡 ネガティブmarginを使った例

netlify

コードを見ましたが、netlifyのこのデザインは、ネガティブmarginを使っていました。

marginやpaddingが効かないケース

marginやpaddingが効かないケースを紹介します。

display: inline;があると効かない

display: inline;の指定がある場合や、spanタグやaタグのように、デフォルトでdisplay: inline;を指定した時のような振る舞いをする要素にはmarginやpaddingが効かない場合があります。

marginとpadding効く?
上下のmargin🙅‍♂️ 効かない
左右のmargin🙆‍♂️ 効く
上下のpadding✋ 効くけど注意
左右のpadding🙆‍♂️ 効く

display: inline;の要素に対する、marginとpaddingは上のような挙動になります。上下のpaddingは効きますが、要素が重なってしまうことがあるので注意が必要です。

display: inline-block;にすると、marginもpaddingも上下左右効きます。

tr / th / tdには効かない

tr / th / tdなど、効かなかったり、意図しない見た目になる要素もあります。

  • trはmarginもpaddingも効かない
  • thとtdはpaddingだけ効く

このようになっています。

marginやpaddingが効かない場合は、その要素が効かない要素かもしれない点も疑うと良いかもしれません。

marginの相殺が起こっている

前述したmarginの相殺が起こっている場合も、効いてないように感じるかもしれません。

  • 余白を入れる方向を統一する
  • marginとpaddingを正しく使い分ける

これらに気をつけていれば、意図しないmarginの相殺は起こりません。

コーディングの練習が出来るサービス「模写修行」を作りました 🎉

模写修行のトップページのスクリーンショット

「模写修行」はこんな方におすすめ!

  • 基礎学習を終えて実践的な経験を積みたい
  • 破綻しない書き方を学びたい(= CSS設計を意識したコーディングを学びたい)
  • 実務と同じようにXDのデータを見ながらコーディングの練習をしたい
  • 現役で制作をやっている人のコードを見たい

基礎学習を終えた方が次にやるべきことは、実践に近い形でたくさん練習することです。そして、わからないことがあれば、その都合調べて理解する。この繰り返しでコーディングやプログラミングは上達します。

「模写修行」ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。

この記事をシェア:

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材