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サンプル
margin-xに関連するCSSプロパティ
余白の指定 | |
---|---|
margin | 要素の外側の余白(マージン)を指定する |
margin-bottom | 要素の底辺に当たる外側の余白(マージン)を指定する |
margin-left | 要素の左辺に当たる外側の余白(マージン)を指定する |
margin-right | 要素の右辺に当たる外側の余白(マージン)を指定する |
margin-top | 要素の上辺に当たる外側の余白(マージン)を指定する |
padding | 要素の内側の余白を指定する |
padding-bottom | 要素の内側の底辺側に当たる余白を指定する |
padding-left | 要素の内側の左辺側に当たる余白を指定する |
padding-right | 要素の内側の右辺側に当たる余白を指定する |
padding-top | 要素の内側の上辺側に当たる余白を指定する |