| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {margin-left: 値 } |
| 値 の形式 | 数値 （長さ，%） | auto |
| 初 期 値 | 0 |
| 対応ブラウザー | C1+ / e3+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
| 適用可能な要素 | すべての要素 （テーブルの行の組，ヘッダの組，フッタの組，コラムの組とコラムを除く） |
| 継 承 | しない |
margin は，要素外側の余白であり，要素とその外側にある他の要素との間の余白（マージン）を設定します。 この要素が他の要素に含まれている場合は，含んでいる要素の内容領域の境界とこの要素の境界との間に，ここで指定した余白が取られます。
margin-leftプロパティ は 要素左側の余白 を指定するために使用します。
数値による 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-top:3em; margin-right:5em; margin-bottom:2em; margin-left: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> |
| ブラウザー 表示例 | |
|---|---|
|