| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {margin: 上の値 右の値 下の値 左の値 } |
| 値 の形式 |
|
| 初 期 値 | 0 0 0 0 |
| 対応ブラウザー | C1+ / e3+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
| 適用可能な要素 | すべての要素 （テーブルの行の組，ヘッダの組，フッタの組，コラムの組とコラムを除く） |
| 継 承 | しない |
margin プロパティ は，指定した要素とその外側にある 他の要素との間の余白 （margin-top，margin-right， margin-bottom，margin-left） を一括指定します。
すなわち，
上の 1 ～ 4 に示すとおり，値の形式 として， 半角ブランクを挟んで４つまでの値が指定できます。 このとき，
要素の余白を設定するプロパティとしては，ほかに padding（パディング）があります。 padding の方は，いわば 要素内側の余白 であり，要素全体の占める領域と文字や画像等の表示領域との余白を意味します。
数値による margin の指定は，次のような単位を付けて可能です。
| 単位 | 説 明 |
|---|---|
| px | px とは画面の１画素（ピクセル） のサイズを１とする単位です。 実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。 |
| em | em とは現在使用中の標準フォントの高さを１とする単位です。 |
| ex | ex とは現在使用中の標準フォントの小文字の｢x｣の高さを１とする単位です。 |
| ％ | 親要素の widthプロパティ の値を基準にして割合を％値で指定します。 |
また，"auto" を指定すると，余白が自動調整されます。
以下の例では，<div class="loose"> 要素は，テーブルのセルの領域に対して，上に３文字，右に５文字，下に２文字，左に１文字の間隔が確保されております。 同様の形式と値で padding プロパティを指定した場合と比較してみてください。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css"> <!-- div.loose { margin: 3em 5em 2em 1em ; background-color: #CC99CC } td.backgrnd { background-color: #99CC99; width:41.8em; } --> </style> |
| HTML <body> ～ </body> |
<table>
<tr>
<td class="backgrnd">
<div>
<div class="loose">
ああああああああああああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああ
</div>
</div>
</td>
</tr>
</table> |
| ブラウザー 表示例 | |
|---|---|
|