余白したい（margin）

.box {
  margin: 1em 2em 1em 2em;  /* 上 右 下 左 */
}

marginプロパティで要素の外側の余白を設定できます。 単位はemやrem、pxや%が使えます。

値の指定方法は、値の個数によって意味が変わります。

• 1個: margin: すべて;

• 2個: margin: 上下 左右;

• 3個: margin: 上 左右 下;

• 4個: margin: 上 右 下 左;

marginは一括指定プロパティ（shorthand property）なので、上下左右のマージンを一括で指定できるのですが、 引数の順番が覚えにくいです。 以下のように個別に設定したほうが、分かりやすくてよいかもしれません。

中央寄せしたい（margin: auto）

.box {
  width: 40rem;
  margin: 0 auto;
}

margin: autoは、要素の余白を自動で計算してくれる値です。 margin: 0 autoを指定すると、上下の余白は0、左右の余白は自動で計算され、コンテンツが中央に配置されます。

この設定は、widthなど、幅が決まっている要素に対してのみ有効です。 また、上下のmarginにautoを指定しても中央寄せにはなりません。

一括マージンしたい（margin）

.box {
    margin: 1em;  /* 上 下 左 右 */
}

上下マージンしたい（margin-top / margin-bottom）

.box {
  margin-top: 1em;
  margin-bottom: 1em;
}

margin-topとmargin-bottomで、上下の余白を個別に指定できます。

.box {
  margin: 1em 0;  /* 上下 左右 */
}

左右マージンしたい（margin-left / margin-right）

.box {
  margin-left: 1em;
  margin-right: 1em;
}

margin-leftとmargin-rightで、左右の余白を個別に指定できます。

.box {
    margin: 0 1em;
}

個別マージンしたい

.box {
  margin-top: 1em;
  margin-bottom: 2em;
  margin-left: 3em;
  margin-right: 4em;
}

すべてのマージンを個別に指定することもできます。

.box {
    margin: 1em 4em 2em 3em;
}

ブロック要素同士の隙間が詰め詰めになっていると窮屈に感じることがあります。 適切なマージンをつけると見やすくなると思います。

インライン要素（display: inline flow）には、上下のmarginが効きません。 左右のmarginは効くので、上下の余白も指定したい場合は 表示スタイルしたい（display）で紹介したinline flow-rootに変更する必要があります。

ヒント

CSSを編集できない場合は、改行（<br>タグ）で対応するケースもありますが、 本来であれば適切なマージン設定をすべきだと思います。

リファレンス

• margin