margin：要素の外側の余白を指定する
| 適用対象 | 全ての要素（テーブルの内部要素以外） |
| 継承 | しない |
marginプロパティは、要素の周りに余白を設定する際に使用します。マージンにマイナス値を指定して、要素を重ね合わせる事もできます。
特定の部分だけに余白を指定したい場合には、margin-top,margin-right,margin-bottom,margin-leftを使用します。
marginに与えられる値
- margin: 値;
- [px]や[em]、[%]などの単位で上下左右全ての辺に対して余白を取る場合に使用します。[auto]と記述すると自動的に算出された余白が与えられます。
- margin: 値 値;
- 始めに記述した値を上下、半角スペースで区切って記述した値を左右の余白として取ります。
- margin: 値 値 値 値;
- 順に上、右、下、左の順に個別で余白の値を指定することができます。
marginの使用サンプル
CSS
.box_sample01 {
border: 1px solid #666666;
background-color:#FFE4B5;
padding: 5px;
margin: 0px 20% 10px 30%;
}
.box_sample02 {
width: 340px;
border: 1px solid #666666;
background-color:#FFE4B5;
padding: 5px;
margin: 0px auto;
}
XHTML
<div class="box_sample01"> box_sample01 [margin: 0px 20% 10px auto;]<br /> marginサンプル<br /> </div> <div class="box_sample02"> box_sample02 [margin: 0px auto;]<br /> marginサンプル<br /> </div>
表示確認
box_sample01 [margin: 0px 20% 10px auto;]
marginサンプル
marginサンプル
box_sample02 [margin: 0px auto 10px auto;]
marginサンプル
marginサンプル
marginに関連するCSSプロパティ
| 余白の指定 | |
|---|---|
| margin | 要素の外側の余白（マージン）を指定する |
| margin-bottom | 要素の底辺に当たる外側の余白（マージン）を指定する |
| margin-left | 要素の左辺に当たる外側の余白（マージン）を指定する |
| margin-right | 要素の右辺に当たる外側の余白（マージン）を指定する |
| margin-top | 要素の上辺に当たる外側の余白（マージン）を指定する |
| padding | 要素の内側の余白を指定する |
| padding-bottom | 要素の内側の底辺側に当たる余白を指定する |
| padding-left | 要素の内側の左辺側に当たる余白を指定する |
| padding-right | 要素の内側の右辺側に当たる余白を指定する |
| padding-top | 要素の内側の上辺側に当たる余白を指定する |