この記事は2008年6月25日に書かれたものです。既に内容が古い可能性があります。

margin:余白指定

marginプロパティは、ボックスの上下左右のマージン領域(一番外側の余白)をコントロールします。また、”margin-right””margin-left”の値に”auto”を指定する事でボックスを中央に寄せます。(一部ブラウザではbodyに”text-align:center;”を指定しなければならない。)マージン領域については、下記サンプル図を参照。

ボックスモデルサンプル図

プロパティ

margin

margin-top

margin-bottom

margin-right

margin-left

単位

対象

すべての要素

継承の有無

なし

ポイント

float指定と併用する際、float指定側にmarginを取るとIEで余分な余白が生じる。

margn一括指定と指定場所

margin: 10px 20px 30px 40px;
上 10px,  右20px,  下 30px,  左 40px
--------------------------------------

margin: 10px 20px 30px;
上 10px,  左右 20px,  下 30px
--------------------------------------

margin: 10px 20px;
上下 10px,  左右 20px
--------------------------------------

margin: 10px;
上下左右 10px

タグ: