マージンを設定する

margin-top: マージン
 ⇔　上マージン
margin-bottom:　マージン
 ⇔　下マージン
margin-left:　マージン
 ⇔　左マージン
margin-right:　マージン
 ⇔　右マージン
margin:　マージン
 ⇔　上・右・下・左マージン

マージン　　　　単位付きの数値・％・auto

これらのプロパティは、マージンを設定します。％で指定した場合には、
指定されたボックスを含むボックスの横幅に対する割合となります。
上下のマージンについても、高さではなく横幅を参照しますので注意して下さい。
値として「auto」を指定すると、マージンは状況に応じて自動的に調節されます。例えば、
インライン要素の上下左右とブロックレベル要素の上下については0になり、
ブロックレベル要素の左右に指定すると両者が同じ値となるためにセンタリングされます。
「margin」を利用すると、上下左右のマージンを一度に設定することが出来ます。
その場合、値を半角スペースで区切って指定しますが、与えられた値の個数によって
次の様にマージンが設定されます。
●値が１つの場合
●値が２つの場合
●値が３つの場合
●値が４つの場合		 値１⇒上下左右
値１⇒上下　値２⇒左右
値１⇒上　値２⇒左右　値３⇒下
値１⇒上　値２⇒右　値３⇒下　値４⇒左

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>CSS覚書</title>
<style type="text/css">
<!--
body {
color: #ff6600;
margin: 0
}
p {
text-align: center;
font-weight: bold;
padding: 0.5em;
border: solid 3px #000000; 　　　　　　　　　　　　　　　　　　　　　　　　　
color: #ffffff;
background: #ff3300
}
#sample1 { margin: 0 }
#sample2 { margin: 20px }
#sample3 { margin: 40px }
#sample4 { margin-right: 50% }
#sample5 { margin-left: 50% }
h1 { text-align: center }
-->
</style>
</herd>
<body>
<h1>マージンを設定する</h1>
<p id="sample1">上下左右マージン：0ピクセル</p>
<p id="sample2">上下左右マージン：20ピクセル</p>
<p id="sample3">上下左右マージン：40ピクセル</p>
<p id="sample4">右マージン：50％</p>
<p id="sample5">左マージン：50％</p>

</body>
</html>