{ margin-top 【 マージン・トップ 】 : 幅; }

{ margin-right 【 マージン・ライト 】 : 幅; }

{ margin-bottom 【 マージン・ボトム 】 : 幅; }

{ margin-left 【 マージン・レフト 】 : 幅; }

margin系プロパティは、ボックスの外側の余白（マージン）の幅を指定します。それぞれ上辺、右辺、下辺、左辺に対応しています。すべての要素に適用できますが、margin-top、marginbottomプロパティの指定は非置換インライン要素には影響を与えません。

初期値	0
継承	なし
適用される要素	テーブル関連要素以外のすべての要素。ただし、displayプロパティでtable-caption、table、inline-tableが指定された要素には適用可能
モジュール	CSS basic box model

値の指定方法

幅

auto	自動的に適切なマージンが適用されます。ボックスの幅（width）を指定したうえで、左右のマージンをautoにすると、ボックスは水平方向の中央に揃います。
任意の数値＋単位	単位付きの数値で指定します。負の値も指定できます。
％値	%値を指定します。値は親要素のブロックに対する割合となります。

CSSにおける単位付きの数値の指定方法

サンプルコード

垂直方向に隣接するボックスのマージンは相殺され、大きいほうの値が適用されます。以下の例では、box01とbox02の間のマージンは30pxとなります。値が両方とも負の場合は、0に近い値が適用されます。片方だけ負の場合は、両方の値の和が適用されます。

.box01 {
  margin-bottom: 20px;
}
.box02 {
  margin-top: 30px;
}

関連記事

• margin　ボックスのマージンの幅をまとめて指定する