margin

解説

上下左右のマージン（要素に対する余白）をまとめて指定します。マージンは常に透明です。上下左右を異なるマージン幅にしたい場合は、スペース区切りにて複数の値を指定します。値を1つ指定した場合は指定した値が上下左右のマージンとなります。値を2つ指定した場合は記述した順に[上下][左右]のマージンとなります。値を3つ指定した場合は記述した順に[上][左右][下]のマージンとなります。値を4つ指定した場合は記述した順に[上][右][下][左]のマージンとなります。マージンには負の値を指定することもできますが、環境によっては思惑通りに描画されないかもしれません。

パーセント値での指定も可能ですが、包含ブロックの横幅に対する割合となるので注意が必要です。margin-topやmargin-bottomの場合も、高さではなく横幅を参照します。

autoという値を取ることも可能で、要素のwidthやheightからマージンを算出しなさいという指定となっています。

また、縦方向のmarginは重なり合い、指定の大きい方が生かされますので注意が必要です。ただし、どちらかのマージンが負の値ならば合計され、浮動体や絶対配置のボックスでは重なりません。水平方向のマージンも重なりません。

プロパティ情報

値：	長さ、パーセンテージ、`auto`のいずれかを1つ以上4つ以下。
初期値：	定義無し
適用対象：	全ての要素
継承：	しない
パーセンテージ：	包含ブロックの横幅に対する割合
適用メディア：	視覚
レベル：	1～2

参照

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

使用例

ソース

CSSの記述方法はスタイルシートってなに？も参照下さい。

div.pare  {border:1px solid #0000ff;margin: 3px;}
p.sample1 {border:1px solid #ff0000;margin: 10px;} 
p.sample2 {border:1px solid #ff0000;margin: 10px 20px;}
p.sample3 {border:1px solid #ff0000;margin: 10px 20px 30px;}
p.sample4 {border:1px solid #ff0000;margin: 10px 20px 30px 40px;}

HTMLの記述方法

<p class="pare"><p class="sample1">サンプル</p></p>
<p class="pare"><p class="sample2">サンプル</p></p>
<p class="pare"><p class="sample3">サンプル</p></p>
<p class="pare"><p class="sample4">サンプル</p></p>

表示結果

サンプル

視覚的に分かり易いよう、包含ブロックを青線で表示しています。