margin-top,right,bottom,left：要素の外側の余白を個別に指定する

適用対象	全ての要素（テーブルの内部要素以外）
継承	しない

margin-top,right,bottom,leftプロパティは、要素の指定した辺に余白を設定する際に使用します。マージンにマイナス値を指定して、要素を重ね合わせる事もできます。

マージンを一括で指定したい場合には、marginを使用します。

margin-top,right,bottom,leftに与えられる値

margin-top,right,bottom,left: 値;: [px]や[em]などの単位で余白を取る場合に使用します。
margin-top,right,bottom,left: 値%;: 親要素の幅に対して%値で余白を指定する場合に使用します。
margin-top,right,bottom,left: auto;: [auto]と記述すると自動的に算出された余白が与えられます。

margin-top,right,bottom,leftの使用サンプル

CSS

.sample_box {
 border: 1px solid #666666;
 padding: 5px;
 margin-top: 30px;
 margin-bottom: 20px;
}
.box_sample01 {
 border: 1px solid #666666;
 background-color:#FFE4B5;
 padding: 5px;
 margin-left: 20%;
 margin-bottom: 10px;
}
.box_sample02 {
 border: 1px solid #666666;
 background-color:#FFE4B5;
 padding: 5px;
 margin-right: 20%;
 margin-bottom: 10px;
}

XHTML

<div class="sample_box">

<div class="text_sample01">
box_sample01<br />
[margin-left: 20%;]<br />
[margin-bottom: 10px;]<br />
marginサンプル<br />
</div>

<div class="text_sample02">
box_sample02<br />
[margin-right: 20%;]<br />
[margin-bottom: 10px;]<br />
marginサンプル<br />
</div>

</div>

表示確認

box_sample01
[margin-top: 30px;]
[margin-bottom: 20px;]
marginサンプル

box_sample02
[margin-right: 20%;]
marginサンプル

margin-xに関連するCSSプロパティ

余白の指定
margin	要素の外側の余白（マージン）を指定する
margin-bottom	要素の底辺に当たる外側の余白（マージン）を指定する
margin-left	要素の左辺に当たる外側の余白（マージン）を指定する
margin-right	要素の右辺に当たる外側の余白（マージン）を指定する
margin-top	要素の上辺に当たる外側の余白（マージン）を指定する
padding	要素の内側の余白を指定する
padding-bottom	要素の内側の底辺側に当たる余白を指定する
padding-left	要素の内側の左辺側に当たる余白を指定する
padding-right	要素の内側の右辺側に当たる余白を指定する
padding-top	要素の内側の上辺側に当たる余白を指定する