CSS: マージンを指定する(margin プロパティ)

ボックスのマージンを指定するには margin プロパティを使用します。 マージンはボーダー(枠線)の外側の領域です。

マージン

内容領域、パディング、ボーダー、マージンの関係について知りたい人はコチラのページを参照してください。 (参考記事: CSSのボックスモデル

マージンをまとめて指定する場合は margin プロパティを使い、 個別に指定する場合は margin-top、margin-right、margin-bottom、margin-left プロパティ を使います。

使用例


/* まとめて指定する場合 */
margin: 1px;                /* 上下左右同じ  */
margin: 1px 2px;            /* 上下、左右    */
margin: 1px 2px 3px;        /* 上、左右、下  */
margin: 1px 2px 3px 4px;    /* 上、右、下、左 */

/* 個別に指定する場合 */
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;

マージンの相殺について

上下に隣接するボックス同士のマージンは相殺されて、 大きい方のマージンが適用されます。

左右に隣接するボックス同士のマージンは相殺されません。

値の指定方法

★ 実数値+単位

数値に単位を付けて指定します。(例 10px )

★ パーセント+%

包含ブロックの横幅に対するパーセンテージで指定します。(例 90% )

★ auto

自動的に調整されます。ブロックレベル要素の場合は、上下のマージンは「0」となります。 左右のマージンにautoを指定すると、その要素を「センタリング」できます。 インライン要素の場合は上下左右のマージンが「0」となります。

ブラウザの初期マージン

一般的にブラウザの表示領域には、ブラウザ側でマージンの初期値が設定されています。 ブラウザの端から表示させたい場合は body 要素に「margin: 0」を指定してください。

HTML・CSS入門