margin-top: ★;

margin-right: ★;

margin-bottom: ★;

margin-left: ★;

122p

ボックスのマージンを個別に指定します。
マイナス値も指定できます。
（マージンとは下の表の赤色の所をマージンといいます。）
ボックスの外側の幅を決めます。
上下に隣接する要素同士のマージンは、相殺されて大きい方のマージンが指定されます。
ボックス間の左右のマージンは相殺されません。

すべての要素にはボックスと呼ばれる
四角い領域を持ちます。

値は次の3つの中から選びます。

  • 実数値＋単位
    数値に単位を付けてマージンを指定します。
  • パーセント値
    ブロックの横幅に対する割合でマージンを決めます。
    高さに対する割合ではないので注意してください。
  • auto
    自動的に調節します。
 例  CSS
.sample {
margin-top: 20px;
margin-right: auto;
margin-bottom: 10px
margin-left: auto;
padding: 5px;
width: 300px;
border: 3px solid #000000;
text-align: center;
} 		XHTML
<div class="sample">
<p>
上は20px、左右はauto、下は10pxで指定しています。
<⁄p>
<⁄div>

marginを指定したほうとしていない方の違いを現したのはこちらです！
ここをクリック！