最終更新日

marginプロパティ

marginは、要素のマージンをまとめて指定するためのプロパティです。値は、長さのサイズ値またはパーセント値、キーワード「auto」のいずれかを指定します。マージンには、負の値を指定することも可能です。それにより、隣接する要素ボックスを重ね合わせることができます。

値を4個指定した場合、4つの値は、上、右、下、左のマージンをそれぞれ順に表します。

・値が3個の場合は、左右のマージンが同じ値を示す
・値が2個の場合は、上下、左右のマージンがそれぞれ同じ値を示す
・値が1個の場合は、上下左右のマージンがすべて同じ値を示す

なお、マージンの値をそれぞれ個別に指定する場合は、下記プロパティを使用します。

margin-top
margin-right
margin-bottom
margin-left

CSS3での変更点
特にありません
初期値 適用先 継承
各プロパティの初期値 すべての要素 なし
説明
auto 値が自動的に計算されます。
長さの値 「5px」「3em」のように、数値に単位を付けて指定します。
パーセント値 「100%」のように、数値に「%」の単位を付けて、他の値に対する割合で示します。
サンプルコード
margin: 10px;
margin: 5%;
margin: auto;
参考文献:CSS basic box model外部リンク
HOME