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サンプル
[margin-top: 30px;]
[margin-bottom: 20px;]
marginサンプル
box_sample02
[margin-right: 20%;]
marginサンプル
[margin-right: 20%;]
marginサンプル