マージン - wicky @ ウィキ

マージン

　ほかの要素との余白のことを「マージン」と呼ぶ。マージンの背景は透明なため、親要素に設定されている背景が表示される。

■マージンのプロパティ

プロパティ	概要
margin-top	上マージン
margin-right	右マージン
margin-bottom	下マージン
margin-left	左マージン

以下に、p要素に上下マージンを設定する例を示す。

●マージンの設定例

p {
    margin-top : 10px;
    margin-bottom : 10px;
}

　プロパティの値には、長さまたはパーセンテージ（親要素のボックス内容を100％として計算）を指定する。また、autoを指定することで、ブラウザによって自動的にマージンが設定される。

　※左右のマージンをautoに設定すると自動的にセンタリングされる計算だが、ブラウザによってはセンタリングされないものがある。

　※長さの単位についてはプロパティ値の単位を参照。

　上下に接する要素間のマージンは相殺され、どちらか大きな値に設定されているマージンが選択される。

　marginプロパティを設定することで、上下左右のマージンをまとめて設定することができる。設定する値の数によって、上下左右どの部分のマージンをしていするかが決まる。

　※複数の値を指定する場合は、区切り文字として、カンマ「,」または空白を使用する。

■marginプロパティの値

値の数	概要
1	上下左右
2	上下、左右
3	上、左右、下
4	上、右、下、左（ボックスの上から時計回りに）

　以下にmarginプロパティの設定例を示す。

●上下左右のマージンを10pxに指定

p { margin : 10px }

●上下のマージンを10pxに、左右のマージンを5pxに指定

p { margin : 10px 5px }

●上のマージンを10pxに、左右のマージンを5pxに、下のマージンを10pxに指定

p { margin : 10px 5px 10px }

●上のマージンを10pxに、右のマージンを10pxに、下のマージンを20pxに、左のマージンを5pxに指定

p { margin : 10px 10px 20px 5px }

　※マージンは子要素に継承されない。親要素のマージンを継承したい場合は、次のように「inherit」を設定する。
　　p { margin : inherit }