margin
試してみましょう
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
css
/* 四辺すべてに適用 */
margin: 1em;
margin: -3px;
/* 上下 | 左右 */
margin: 5% auto;
/* 上 | 左右 | 下 */
margin: 1em auto 2em;
/* 上 | 右 | 下 | 左 */
margin: 2px 1em 0 auto;
/* グローバル値 */
margin: inherit;
margin: initial;
margin: revert;
margin: unset;
margin
プロパティは 1 ~ 4 つの値を使って指定することができます。それぞれの値は <length>
、<percentage>
、 または auto
キーワードです。負の数を指定すると、要素を既定よりも隣と近づけて描画します。
- 値が 1 つ指定された場合、全四辺に同じマージンが適用される。
- 値が 2 つ指定された場合、1 つ目のマージンは上下、2 つ目は左右の辺に適用される。
- 値が 3 つ指定された場合、1 つ目のマージンは上、2 つ目は左右、3 つ目は下の辺に適用される。
- 値が 4 つ指定された場合、マージンはそれぞれ上、右、下、左の順 (時計回り) に適用される。
値
<length>
-
マージンの寸法を固定値で表したものです。
<percentage>
-
マージンの寸法を包含ブロックの幅に対するパーセント値で表したものです。
auto
-
ブラウザーが適切なマージンを選択して使用します。例えば、要素を中央揃えするためにこの値を使用することもあります。
解説
水平方向の中央揃え
最近のブラウザーで何かを中央揃えしたい場合は、display
: flex;
justify-content
: center;
を使用することができます。
しかし、 IE8-9 のような古いブラウザーはフレックスボックスレイアウトに対応していないため、これは利用できません。親要素内で要素を中央揃えするのであれば、 margin: 0 auto;
を使用してください。
マージンの相殺
要素の上下のマージンは、相殺されて 2 つのマージンのうち大きい方を取る単一のマージンになることがあります。詳しくはマージンの相殺の習得を参照してください。
公式定義
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | table-caption , table , inline-table 以外の表の display 種別を除くすべての要素。 ::first-letter および::first-line にも適用されます。 |
継承 | なし |
パーセント値 | 包含ブロックの幅に対する相対値 |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | length |
形式文法
margin =
<'margin-top'>{1,4}
例
単純な例
HTML
html
<div class="center">This element is centered.</div>
<div class="outside">This element is positioned outside of its container.</div>
CSS
css
.center {
margin: auto;
background: lime;
width: 66%;
}
.outside {
margin: 3rem 0 0 -3rem;
background: cyan;
width: 66%;
}
その他の例
css
margin: 5%; /* 全辺: 5% のマージン */
margin: 10px; /* 全辺: 10px のマージン */
margin: 1.6em 20px;
/* 上と下: 1.6em のマージン */
/* 左と右: 20px のマージン */
margin: 10px 3% -1em;
/* 上: 10px のマージン */
/* 左と右: 3% のマージン */
/* 下: -1em のマージン */
margin: 10px 3px 30px 5px;
/* 上: 10px のマージン */
/* 右: 3px のマージン */
/* 下: 30px のマージン */
/* 左: 5px のマージン */
margin: 2em auto;
/* 上と下: 2em のマージン */
/* ボックスは水平方向に中央 */
margin: auto;
/* 上と下: 0 のマージン */
/* ボックスは水平方向に中央 */
仕様書
Specification |
---|
CSS Box Model Module Level 3 # margin |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS 基本ボックスモデル入門
- マージンの相殺
margin-top
,margin-right
,margin-bottom
,margin-left
- 対応する論理的プロパティ:
margin-block-start
,margin-block-end
,margin-inline-start
,margin-inline-end
および一括指定のmargin-block
とmargin-inline