【CSS入門】marginで要素外側の余白を指定

この記事ではCSSのmarginプロパティについて解説します。

marginとは？

CSSでレイアウトをする際、下図のようなボックスモデルと呼ばれる余白の考え方を理解する必要があります。

その中でmarginは、要素の外側の余白を指定するのに使います。

要素の外側の余白とは要素の中身と枠の外側にある部分のことで、上下左右に余白を指定できます。

ちなみに要素にwidthやheightを指定すると、要素の中身の大きさが変わります(図でいうと白い点線内)。

marginの使い方

まとめて値を指定

marginは以下のように、まとめて指定することができます。

4つの値を半角スペースで区切って書くと、上から時計周りで余白の値を指定することができます。

CSS

margin: 10px 20px 10px 20px;

/* 上10px 右20px 下10px 左20px */

その他にも、4つの値ではなく3つや2つの値で省略して書くこともできます。

CSS

margin: 10px 20px 10px;

/* 上10px 左右20px 下10px */



margin: 10px 20px;

/* 上10px 左右20px */

個別に値を指定

Webサイトを作っていると、個別に値を指定する機会は割と多いのでこちらも覚えておきましょう。

CSS

margin-top: 10px;

/* 上のmarginだけ10px */  


margin-right: 20px;

/* 右のmarginだけ20px */


margin-bottom: 10px;

/* 下のmarginだけ10px */


margin-left: 20px;

/* 左のmarginだけ20px */

以下の場合、「下のmarginだけ20px」という指定になります。

HTML

<div class="BOX-A">BOX-A</div>
<div class="BOX-B">BOX-B</div>

CSS

.BOX-A{
  margin-bottom: 20px;
}

marginの相殺

marginが指定されている要素が前後に並ぶと、値が大きい方のmarginのみが適用されます。

これをmarginの相殺と呼びます。

以下の場合、一見すると上の要素と下の要素に指定してあるmarginの値を足して30px余白ができそうですが、実際には相殺が起こり余白は下の要素に指定してある20pxが適用されます。

HTML

<div class="BOX-A">BOX-A</div>
<div class="BOX-B">BOX-B</div>

CSS

.BOX-A{
  margin-bottom: 10px;
}

.BOX-B{
  margin-top: 20px;
}

気をつけること

marginの相殺は上下のmarginでのみ起こりますので、左右のmarginでは相殺は起こりません。

左右中央配置

ブロック要素のmargin左右の値をautoにすると、左右中央配置になります(その時margin上下はauto指定にすることが多い)。

詳しくはこちらの記事をご覧ください。

まとめ

この記事に書かれていることで、特に覚えておいて欲しいことは以下の3点です。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。