ボックスのマージンの幅を指定する

margin-top
margin-right
margin-bottom
margin-left

{ 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;
}

関連記事