margin 【マージンの指定】

[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op6] [Op7] [Ns6] [Ns7]

marginプロパティは、要素の周りにどれだけ余白を指定するか決める際に使用します。
また特定の部分だけに余白を指定したい場合は、margin-top、margin-right、margin-bottom、margin-leftと個別に指定する事が出来ます。マージンにマイナス値を指定して、要素を重ね合わせる事も出来ます。

余白とコンテンツ領域の取り方は若干の慣れが必要です。余白と外枠の解釈の違い

全体に指定
margin: 10px;

上下、左右の順に指定
margin: 10px 15px;

上、右、下、左の順に指定
margin: 10px 15px 10px 20px;

marginの使用例

CSSファイル

.sample001 {
 height: 200px;
 margin-top: 0px;
 margin-right: 5px;
 margin-bottom: 10px;
 margin-left: 50px;
 background-color: #ffcccc;
}
.sample002 {
 height: 100px;
 margin: 10px;
 background-color: #ccccff;
}

HTMLソース

<div class="sample001">
marginプロパティ使用例<br />
上0px 右5px 下10px 左50px
<div class="sample002">余白10px</div>
</div>

表示すると

余白関連項目

margin(top right bottom left)	マージンに関する指定
padding(top right bottom left)	パディングに関する指定

戻る

TOP

Copyright © digilog. All Rights Reserved.