margin

対応状況
N7.0 Win	N6.0 Win	e6.0 Win	e5.5 Win	e5.0 Win	e5.0 Mac	e4.5 Mac	O7.0 Win	O6.0 Win
○	○	○	○	○	○	○	○	○

値	[ <長さ> \| <パーセンテージ> \| auto ]{1,4} \| inherit
初期値	簡略化プロパティなので定義しない
適用	表内部要素以外のすべての要素
継承	しない
レベル	-
パーセンテージ	コンテナブロックの幅を参照(詳細は以下)
メディア	visual

四辺のマージンの大きさを指定します。

このプロパティを使うと、'margin-top'、'margin-right'、'margin-bottom'、'margin-left'という4つのプロパティを一ヶ所で指定出来ます。

@page規則内の'margin-top'、'margin-bottom'のパーセンテージは、例外的にページボックスの高さを参照します。

キーワード解説

auto: 状況により値が変化します。詳細は、水平方向に値として[auto]を使用した場合、垂直方向に値として[auto]を使用した場合をご覧ください。

書き方は、以下の通りです。0時から時計回り、足りない値は対辺から、と覚えると良いです。基本的にこの手の簡略化プロパティは、すべてそうです。
div { margin: 2em } /* 四辺とも 2em */ div { margin: 1em 2em } /* 上と下が 1em、右と左が 2em */ div { margin: 1em 2em 3em } /* 上1em、右と左2em、下3em */ div { margin: 1em 2em 3em 4em }/* 上1em、右2em、下3em、左4em */

0時から時計回り、足りない値は対辺から。

マージンは基本的に透明ですが、body要素、html要素といったルート要素に指定すると、例外的に背景が表示されます。

フロートでも絶対配置でも無い要素間では、縦方向のマージンは相殺します。

HTMLでは、img要素のマージンに"0"では無い適度な値が望まれていますので、そうなっているUAもあるでしょう。

注意点

@page規則内では、相対単位「em」「ex」は使用出来ません。
'margin-top'も'margin-bottom'も、パーセンテージで参照するのはコンテナブロックの高さでは無く幅です。
@page規則内の'margin-top'、'margin-bottom'のパーセンテージは、例外的にページボックスの高さを参照します。