marginでボックスのマージンの幅を指定する【CSS】

margin系のプロパティはボックスの外側の余白（マージン）の幅を指定するプロパティです。

それぞれ上辺（top）、右辺（right）、下辺（bottom）、左辺（left）に対応しています。

すべての要素に適用できますが、margin-top,margin-bottomプロパティの指定は、spanなど幅や高さが決まっていない非置換インライン要素と呼ばれるものには影響を与えません。

値の指定方法

margin系のプロパティでは、auto・%値・単位付き数値などで指定します。

autoを指定すると、自動的にマージンが適用され、たとえばボックスの幅（width）を指定したうえで、左右のマージンをautoにすると、ボックスは水平方向の中央に揃います。

%値で指定する値は、親要素のブロックに対する割合となります。

また、pxなどの単位をつける数値では、負の値も指定することができます。

関連記事
『CSSにおける長さ・大きさ・角度・時間の単位について【CSS】』

ちなみに垂直方向に隣接するボックスのマージン（外部余白）は相殺され、大きい方の値が適用されます。

以下がその例です。

上のボックスには下方向にマージンを20pxで指定しており、下のボックスの上方向にマージン10pxを指定しています。

ボックス間の余白は30px（20px+10px）になるのではなく、大きい方の値である20pxが適用されます。

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

marginプロパティは、ボックスの外側の余白（マージン）をまとめて指定するショートハンドプロパティです。

指定できる値はmargin系プロパティと同じです。

必ずしも4つの値を指定する必要はなく、指定する値の数によって、適用のされ方が異なります。

値が1つの場合

指定する値が1つの場合、すべての辺に同じ値が適用されます。

値が2つの場合

指定する値が2つの場合、1つ目の値が上下辺、2つ目の値が左右辺に適用されます。

値が3つの場合

指定する値が3つの場合、1つ目の値が上辺、2つ目の値が左右辺、3つ目の値が下辺に適用されます。

値が4つの場合

指定する値が4つの場合、上辺、右辺、下辺、左辺の順番に値が適用されます。

ちなみに内側の余白である「padding（パディング）」の指定もmargin（マージン）と同じように指定します。

関連記事
『paddingでボックスのパディングの幅を指定する【CSS】』