ウェブランサー

margin - 要素の外側の余白を指定する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 全ての要素(テーブルの内部要素以外)
継承 しない

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サンプル
box_sample02 [margin: 0px auto 10px auto;]
marginサンプル

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

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