プロパティ名値説明適用対象継承
margin-top:単位付き数字枠線外側の上の余白すべて
の要素		なし
margin-bottom:単位付き数字枠線外側の下の余白すべて
の要素		なし
margin-left:単位付き数字枠線外側の左の余白すべて
の要素		なし
margin-right:単位付き数字枠線外側の右の余白すべて
の要素		なし
margin:単位付き数字枠線外側の上下左右の余白すべて
の要素		なし
値説明
単位付き数字数値数値に、px,%,em等の単位を付けて指定。
又はautoを指定。
margin:枠線外側の余白
margin:値上下左右
margin:値　値上下　左右
margin:値　値　値上下　左右　下
margin:値　値　値　値上　　右　　下　左
margin-top, margin-bottom, margin-left, margin-right, marginプロパティは、枠線外側の余白を設定します。
値には、数値にpx,%,em等の単位を付けて指定します。%で指定した場合は、指定されたボックスを含むボックスの横幅に対する割り合いとなります。
上下のマージンも高さではなく横幅を参照しますので、注意してください。
値にautoを指定すると、マージンは自動的に調整されます。インライン要素の上下左右とブロックレベル要素の上下については０となり、ブロックレベル要素の左右に指定するとセンターリングされます。
maringを利用すると、上下左右のマージンを一度に設定することができます。値を半角スペースで区切って指定しますが、値の個数によって上記のようにマージンが設定されます。
なお、上下に隣接するブロックレベル要素同士のマージンは、相殺されて大きいほうのマージンだけになります。また、マージンは常に透明で色を設定することはできません。

box_sampl01.gif

サンプルソース
【CSS】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <style type="text/css"> <!-- body{margin:0} p{text-align:center; font-size:2.0em; background-color:#FFD700; border:3px solid black; color:red; } #sampl01{margin:0} #sampl02{margin:-top:20px; margin-left:50px; } #sampl03{margin:50px 200px} #sampl04{margin-left:50% } #sampl05{margin-right:50% } #sampl06{margin-left:auto; margin-right:auto; width:500px; } --> </style> </head> 【HTML】 <body> <p id="sampl01">上下左右マージン０</p> <p id="sampl02">上マージン20ピクセル、左マージン50ピクセル</p> <p id="sampl03">上下マージン50ピクセル、左右マージン200ピクセル</p> <p id="sampl04">左マージン50%</p> <p id="sampl05">右マージン50%</p> <p id="sampl06">左右マージンオートの場合はセンタリングされます。</p> </body> </html>