margin

margin

プロパティの簡単な説明

要素のマージン(余白)を指定する簡略化プロパティ

以下のように、上下左右各marginの値を空白文字類で区切って指定する。

/*H1要素の上下左右に10pxのマージン*/
H1 { margin: 10px; }

/*H2要素の上下に10px、左右に5pxのマージン*/
H2 { margin: 10px 5px; }

/*H3要素の上に10px、左右に15px、下に20pxのマージン*/
H3 { margin: 10px 15px 20px; } 

/*H4要素の上に10px、右に15px、下に20px、左に25pxのマージン*/
H4 { margin: 10px 15px 20px 25px; } 
  1. 値が1つの場合は上下左右を一度に指定する(上記H1の例)。
  2. 値が2つの場合は上下と左右をそれぞれ一度に指定する(上記H2の例)。
  3. 値が3つの場合は順に上、左右、下と対応する(上記H3の例)。
  4. 値が4つの場合は時計回りに上、右、下、左と対応する(上記H4の例)。

この指定方法のルールは、borderpaddingといった簡略化プロパティと共通である。

指定出来る値

値は数値、%値、auto値をとれる。

%値は親要素の幅を基準に算出され、この値は上下marginに対しても同様に適用される。

auto値の計算方法は以下の通り。

  1. 上下marginは0。
  2. 左右marginは、いずれか一方のmargin値がauto以外の場合、そこにボックスの幅を加味した残りの値が他方のmargin値となる。
  3. 左右marginが共にautoの場合、左右のmargin値は等しくなる。
    • ただし、IEの互換モードではこれを解釈せず0とみなす。

尚、このプロパティは簡略化プロパティであるので、初期値を持たない。

paddingとの違い

padding領域はボーダーの内側であるのに対し、margin領域はボーダーの外側である。

f:id:kamioka:20050703101928:image

また、margin領域には以下の特性がある。

マージンの相殺(重なり/つぶし)

padding領域とは異なり、margin領域は隣接する要素のmargin領域と重なる。

簡単に言えば、隣接する2つの要素のマージンのうち、margin値が大きい方の分(marginの最大値)だけマージンが確保されるということで、例えば、下部マージン10pxのP要素[1]があり、これに上部マージン5pxのP要素[2]が続く場合、隣接したP要素[1]とP要素[2]の間のマージンは、P要素[1]の下マージン10pxとP要素[2]の上マージン5pxを足した15pxではなく、marginの最大値である要素P[1]の下マージン値10pxとなる。

f:id:kamioka:20050703105827:image

ただし指定値が負の値(-5pxなど)である場合には、正の値から負のマージン値の絶対値分を差し引いたマージンとなる。正のmargin値が存在しない場合は、0からその絶対値の最大値分を差し引く。例えば、P要素[1]の下部マージンが-10px、P要素[2]の上部マージンが-5pxなら、この2つの要素間のマージンは-10pxとなる。

また、floatされた要素と他の要素との間の上下マージンはつぶされないし、絶対配置された要素と相対配置された要素(static含む)との間のマージンもつぶされない。

マージンの相殺に関するメモ

CSS2の仕様上は左右のマージンはつぶし合わない(重ならない/相殺しない)ことになっているが、現行UAの多くでは左右のマージンもつぶし合っている?

関連するプロパティ

* はてなダイアリーキーワード:margin

Error : RSSが取得できませんでした。 Error : RSSが取得できませんでした。