CSSのmarginとは?余白を指定するpaddingと何が違うのかまで徹底解説

こんにちは! ライターのナナミです。

WEBサイトを作っていて、要素を横や縦に並べることって何度もありますよね。

margin1

でもこんな風に要素同士が近すぎると、ちょっと見づらいですね…。そんな時は、要素の周りに余白をとりましょう!  ということで、今回は要素の外側の余白を指定するmarginについて解説していきます。

この記事は下記の流れで進めていきますね。

  • 【超基礎】要素の構造について
  • 【基礎】marginとはなにか
  • 【基礎】marginの使い方
  • 【発展】margin:autoとは
  • 【発展】marginを使うべきタイミング

marginをスムーズに指定できれば、レイアウトの調整も楽々です。バッチリ覚えちゃいましょう!

目次

要素の構造

marginについて解説する前に、要素の構造について解説していきます。要素の構造についてわかれば、marginを理解するのは楽勝です。

box-sizing3

要素は、このような領域の組み合わせで出来上がっています。

  • 内側の領域が、背景色がつき、paddingで余白を指定できる部分。
  • 線の領域は、borderを指定した時に線が引かれる部分。
  • コンテンツ領域は文字や画像の領域。
  • 外側の領域は、背景色を指定しても色がつかない部分。

marginはここの余白を指定するプロパティとなっています。

marginとは

marginは先ほど触れた通り、要素の外側部分の余白を指定するプロパティです。paddingとの違いも含め、もっと掘り下げて解説していきましょう。

高さや幅に含まれない

marginで指定した値は、要素に指定された幅や高さに含まれません。

margin3

marginを指定する領域は要素の外側なので、要素自体の高さや幅に影響を及ぼさないのです。

paddingとの違い

marginと似たようなプロパティで、paddingというものがあります。これは、要素の内側に余白をつけるプロパティです。下の図を見ると、文字と文字の間は同じように間が空いているように見えますね。

padding6

しかし背景色をつけてみると…

padding7

色がつく位置が全然違いますね。paddingは背景色がつく領域の余白なので、このような結果になります。paddingについては、下記の記事でもっと詳しく解説しています。ぜひ併せて読んでみてください。

marginの使い方

では、marginの使い方についてを見ていきましょう。基本形はこんな感じです。

CSS

セレクタ {
    margin: 余白の数値;
}

数値の部分に、どれだけ空白を入れるかを指定することができます。pxや%など、色々な単位を指定可能です。さらに、autoという自動計算の値もあります。これについては後ほど解説しますね。

では、上下左右を一気に指定する方法と、バラバラに指定する方法、それぞれ細かく見ていきましょう。

上下左右を一気に指定:margin

margin4

marginプロパティは上下左右の余白をまとめて指定することができます。

CSS

セレクタ {
    /* 4辺全て同じ値にする */
    margin:  余白の数値;

    /* 上下と左右で分けて指定 */
    margin:  上下の余白の数値 左右の余白の数値;

    /* 上と下と左右で分けて指定 */
    margin:  上の余白の数値 左右の余白の数値 下の余白の数値;

    /* 4辺バラバラの数値を指定 */
    margin:  上の余白の数値 右の余白の数値 下の余白の数値 左の余白の数値;
}

4辺一気に指定もできますし、上下と左右で分けることも可能です。なかなか汎用性の高い書き方です。使ってみるとこんな感じ。

margin4

HTML

<div class="margin_test-wrap">
    <div class="margin_test">
         周りに余白を指定します。
    </div>
</div>

CSS

.margin_test {
    border: solid 1px;
    width: 200px;
    height:  200px;
    box-sizing:  border-box;
    background-color: #81ff86;
    margin: 10px 50px 100px 140px;
}

.margin_test-wrap {
    border: solid 1px;
    display:  inline-block;
}

一個の記述で、上下左右バラバラの指定ができましたね。

それぞれの辺をバラバラに指定する

右だけに余白が欲しいから、一気に指定する必要はないんだよな…というときに使える、各辺バラバラの指定方法もあります。正しくはこれらを一気に指定できるのがmarginなのですが、まあ細かいことは置いときましょう。

説明見栄え
margin-left要素の左側の余白だけを指定するプロパティです。margin-table1
margin-right要素の右側の余白だけを指定するプロパティです。margin-table2
margin-top要素の上側の余白だけを指定するプロパティです。margin-table4
margin-bottom要素の下側の余白だけを指定するプロパティです。margin-table3

marginで指定できる値 autoとは?

marginは、空白を自動的に計算してくれるautoという値があります。たとえば、下記のような要素があったとしましょう。

margin5

これを親要素の右側に寄せたい時は、下記のように指定します。

margin6

HTML

<div class="margin_test">
     周りに余白を指定します。
</div>

CSS

.margin_test {
    border: solid 1px;
    width: 200px;
    height:  200px;
    box-sizing:  border-box;
    background-color: #81ff86;
    margin:  0 0 0 auto;
}

右側の余白は0であると明示的に示した上で、左にautoを指定しました。すると、右側の余白を0にするために、左の余白を自動的にぐいーっと伸ばしてくれるのです。これを応用したのが、よく使われるmargin:0 autoの中央揃えですね。

margin7

HTML

<div class="margin_test">
     周りに余白を指定します。
</div>

CSS

.margin_test {
    border: solid 1px;
    width: 200px;
    height:  200px;
    box-sizing:  border-box;
    background-color: #81ff86;
    margin:  0 auto;
}

左右をautoにすることで、真ん中に来るように自動的に計算してくれているのです。要素の中央揃えについては、下記の記事でも詳しく解説しています。ぜひ併せて読んでみてください。

marginを使うタイミング

marginの使い方はわかったけど、paddingとの使い分けがよくわからないよ…。

という人も多いかもしれませんね。私も実際そうでした、すっごい困りました。今回、こんなときにはmarginを使おう!というタイミングをいくつかピックアップして見ました。逆に向いていないパターンも挙げてみたので、実装の際に参考にしてみてください。

要素と要素に隙間を開ける

margin-ex1

HTML

<div class="margin_test-wrap">
    <div class="margin_test">
         周りに余白を指定します。
    </div>
    <div class="margin_test">
         周りに余白を指定します。
    </div>
    <div class="margin_test">
         周りに余白を指定します。
    </div>
</div>

CSS

.margin_test {
    border: solid 1px;
    width: 200px;
    height:  200px;
    box-sizing:  border-box;
    background-color: #81ff86;
    float:  left;
    margin:  10px;
}

marginは外側に余白をつけるので、このようにpaddingと組み合わせて使うこともできます。いい感じに正方形の要素が並べられていいですね!

右や中央に寄せたい

margin-ex2

HTML

<div class="margin_test right_test">
     右寄せ!
</div>
<div class="margin_test center_test">
     中央寄せ!
</div>

CSS

.margin_test {
    border: solid 1px;
    width: 200px;
    height:  200px;
    box-sizing:  border-box;
    background-color: #81ff86;
}

.right_test {
    margin: 0 0 0 auto;
}

.center_test {
    margin:  0 auto;
}

先ほどの項目で解説した通り、autoを使うことで右や中央に寄せることができます。ただし、これが使えるのはブロック要素だけなので注意が必要です。ブロック要素ってなんだ?という方は、下記の記事をどうぞ!

向いていないタイミング

marginは、背景色がつけられる内側の領域の余白を指定することができません。つまり、下記のような要素を作る場合には不向きです。

padding8

このような見栄えを作りたい時には、paddingを使うようにしましょう。paddingの詳しい使い方が知りたい方は、下記の記事をどうぞ!

まとめ

いかがでしたか?要素と要素の間を開けるのは、見やすさ的にもデザイン的にも重要です。より素敵なサイトづくりのため、ぜひこの記事を役立ててくださいね!

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

目次