備忘録的プログラミングリファレンス

marginプロパティ

 marginプロパティは、エレメントの表示領域外に設定される余白を指定するプロパティです。 margin-topmargin-bottommargin-leftmargin-rightプロパティを一括で指定できます。
 「width値+margin値」分だけ全体の領域が確保されますが、ボックスとして表示できる領域は「width値」分だけです。

marginプロパティの例(Exampleを参照
margin: 1em;

 marginプロパティもpaddingプロパティと同様に「width値+margin値」分だけ親要素が拡がってしまいます。そのために「width値+margin値」が親要素より小さい必要があります。

 marginプロパティは以下のプロパティを一括で指定できます。

margin-top
上のマージン
margin-bottom
下のマージン
margin-left
左のマージン
margin-right
右のマージン

 値の設定数によって上下左右のmarginの量を設定できます。

値を1つ指定上下左右で同じ値になります。
値を2つ指定上下、左右の設定になります。
値を3つ指定上、左右、下の設定になります。
値を4つ指定上、右、下、左の設定になります。

構文(Syntax)

CSS

margin: margin-width margin-style margin-color;

DOM(JavaScript)

値の取得
String = object.style.margin;
値の設定
object.style.margin="_value_";

値(Values)

Value摘要
0初期値(default値)
lengthCSS長さの単位
auto中央揃えに使う/td>
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)0
継承(Inherited)No
CSS AnimationYes

Example

 marginの例です。エレメントの周りにmarginが設定されます。

 ここでは親エレメントの定義上、右側のmarginは分かり難いですが設定はされています。