マージン（Margin）

marginとは、上下左右のマージンに関する設定を一括して指定するためのプロパティです。

値がひとつだけのときには全てのマージンを等しく指定しますが、値の数によって上下と左右のそれぞれを等しく指定したり、左右のみを等しく指定したり、あるいは全てのマージンに異なる値を指定できます。

値は数値に単位をつけて指定、もしくは自動的に設定する際にはautoを指定します。

Functional list
書式 margin: <value:値>
値 [<length> |<percentage> | auto ]{1,4}
初期値 未定義
適用要素 全ての要素
継承性 不可

marginプロパティーは、一つから四つの値を特定して要素のマージンを設定し、各値はlength・percentageまたは autoです。

パーセント値は親要素の幅を参照します。

負のマージンは許されます。

四つの値が与えられるなら、上部・右・下部・左マージンそれぞれに、適用されます。

二つか三つなら、見当たらない値は反対の側から取られます。

マージン宣言の例です

BODY { margin: 5em }/* 全マージン 5em */
P { margin: 2em 4em }/* topとbottomマージン2em, leftとrightマージン 4em */
DIV { margin: 1em 2em 3em 4em }
/* top margin 1em,
right margin 2em,
bottom margin 3em,
left margin 4em */

垂直方向のマージンと結び付け、マージン値の最高値を使うと破綻することに注意しておきます。

水平方向にマージンは破綻しません。

marginプロパティーで、一つで全てのマージンを設定できます；代わりに、プロパティーmargin-top・margin-bottom・margin-leftそしてmargin-rightを使うかもしれません。

戻る