【ボックス】margin

説　明

ボックス要素とその内側にあるボックス要素の間隔を設定します。

使い方

▼ 一括設定
margin: 上下左右;
margin: 上下 左右;
margin: 上 左右 下;
margin: 上 右 下 左;

▼ 個別指定
margin-top: 上;
margin-right: 右;
margin-bottom: 下;
margin-left: 左;

上、下、右、左：マージン（間隔）

解　説

上、下、右、左：数値＋単位
数値＋単位　で指定します。単位は主に「px」を用います。
「上下左右」は上、右、下、左側のマージン（間隔）を一括指定します。
「上下」は上、下を、「左右」は左、右のマージンを一括指定します。
「上」「右」「下」「左」は、個々にマージンを指定します。

次のキーワードが設定可能です。
初期値は「0」です。

0（初期値）、数値＋単位

　　0・・・間隔はゼロです。
　　数値＋単位・・・数値を設定します。マイナスも可能。単位は主に「px」を指定します。

尚、数値（サイズ）で指定する方法以外にパーセント（％）指定やauto（ブラウザ自動設定）指定がありますが、ここでは説明しません。

ソースコード：上下左右＝10px

aaa1 {
margin:10px;
}

表示例：上下左右＝10px

ボックス

ソースコード：上下＝10px　左右＝50px

aaa2 {
margin:10px 50px;
}

表示例：上下＝10px　左右＝50px

ボックス

ソースコード：上＝10px　右＝30px　下＝60px　左＝100px

aaa3 {
margin:10px 30px 60px 100px;
}

ソースコード：上＝10px　右＝30px　下＝60px　左＝100px

aaa4 {
margin-top:10px;
margin-right:30px;
margin-bottom:60px;
margin-left:100px;
}

表示例：上＝10px　右＝30px　下＝60px　左＝100px

ボックス

ソースコード：上＝ｰ10px

aaa5 {
margin-top:-10px;
}

表示例：上＝ｰ10px（上に10pxはみ出します）

ボックス

以上。

【もくじ】へ