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

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

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

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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

👆 メンターやってます 👆

marginとpaddingの違い

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

ボックスモデル

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

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

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

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

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

marginとpaddingの書き方

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

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もショートバンドという、省略して書く方法があります。

---

p{
    /* padding: 上下の値 左右の値; */
    padding: 10px 20px;
}

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

---

p{
    /* padding: 上の値 左右の値 下の値; */
    padding: 10px 20px 30px;
}

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

---

p{
    /* padding: 上の値 右の値 下の値 左の値; */
    padding: 10px 5px 30px 20px;
}

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

【駆け出しの方へ】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターは全員現役エンジニア 👆

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

<p class="text">小学校に居る時分学校の二階から…</p>
<p class="text02">親譲りの無鉄砲で小供の時から損ばかり…</p>

.text02{
    display: inline-block;
    background-color: rgba(197,171,95,.3);
}

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

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

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

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

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

paddingを指定してみる

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

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

borderを指定してみる

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

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

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を指定してみる

.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はそのサイズになります。

---

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

500pxではなく、400pxになっている場合は、おそらくリセットCSSで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です。

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

border-boxにした場合

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が基準です。

%指定の具体例

<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

<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

<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;を使うと、中央配置することが可能です。これはかなり使います。

もし.boxにdisplay: 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

<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のこのデザインは、ネガティブmarginを使っていました。

marginやpaddingが効かないケース

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

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

display: inline;の指定がある場合や、spanタグやaタグのように、デフォルトでdisplay: inline;を指定した時のような振る舞いをする要素にはmarginや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の相殺は起こりません。

独学に限界を感じていませんか？