この記事は編集レビューを必要としています。ぜひご協力ください。
概要
margin
CSSプロパティは、四方全ての余白を設定します。margin
プロパティは、単一方向の margin
を設定するプロパティ ( margin-top
/ margin-right
/ margin-bottom
/ margin-left
) を同時に全方向に対して指定する為のショートハンド・プロパティです。
負の値を指定する事も出来ます。
初期値 | 以下の各プロパティのショートハンドとして補完します:
|
---|---|
適用対象 | テーブル系要素を除く全ての要素。ただし、table-caption 、table 、inline-table には適用できます。. It also applies to ::first-letter . |
継承 | 不可 |
相対値の基準 | 包含ブロックの幅 |
メディア | visual |
計算値 | 以下の各プロパティのショートハンドとして補完します:
|
アニメーションの可否 | 可。 の値として補完しますlength |
正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
[ <length> | <percentage> | auto ]{1,4}
値
次に示す値を 1 ~ 4 つ指定してください。指定数によって指定方向が変化します。
- <length>
- 固定幅を指定します。負の値が許可されています。使用可能な単位は
<length>
を参照してください。 - <percentage>
<percentage>
は常に包含ブロックの幅を基準にします。負の値が許可されています。- auto
auto
は適切な値置き換えられます。例えば、ブロックを中央寄せに使用できます。
div { width:50%; margin:0 auto; }
は div 要素を水平方向で中央寄せします。
- 値が 1 つだけの場合、四方全てに同じ値が適用されます。
- 値が 2 つの場合、1 つ目は上下、2 つ目は左右に適用されます。
- 値が 3 つの場合、1 つ目は上、2 つ目は左右、3 つ目は下に適用されます。
- 値が 4 つの場合、それぞれ 上、右、下、左の順番(時計回り)に適用されます。
例
.targetElm { margin: 5%; } /* 四方全てに 5% の余白 */ .targetElm { margin: 10px; } /* 四方全てに 10px の余白 */ .targetElm { margin: 1.6em 20px; } /* 上下に 1.6em、左右に 20px の余白 */ .targetElm { margin: 10px 3% 1em; } /* 上に 10px、左右に 3%、下に 1em の余白 */ .targetElm { margin: 10px 3px 30px 5px; } /* 上に 10px、右に 3px、下に 30px、左に 5px の余白 */ .targetElm { margin: 1em auto; } /* 上下に 1em 余白、ボックスを水平方向で中央寄せ */ .targetElm { margin: auto; } /* ボックスを水平方向で中央寄せ、上下の余白は 0 */
margin: auto; background: gold; width: 66%;
margin: -1em 0 100px -40px; background: plum; width: 20em
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
CSS Basic Box Model margin の定義 |
草案 | 有意な変更点は無し |
CSS Transitions margin の定義 |
草案 | margin がアニメーション可能要素と定義された |
CSS Level 2 (Revision 1) margin の定義 |
勧告 | インライン要素に対する効果の削除 |
CSS Level 1 margin の定義 |
勧告 | 最初期の仕様定義 |
ブラウザ実装状況
機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
基本サポート | 1.0 | 1.0 (1.7 or earlier) | 3.0 | 3.5 | 1.0 (85) |
auto 値 |
1.0 | 1.0 (1.7 or earlier) | 6.0 (strict mode) | 3.5 | 1.0 (85) |
機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
基本サポート | 1.0 | 1.0 (1) | 6.0 | 6.0 | 1.0 |
関連情報
ドキュメントのタグと貢献者
タグ:
このページの貢献者:
taiyaki32p,
Simplexible,
Prinz_Rana,
fscholz,
Sebastianz,
ethertank,
sosleepy,
teoli,
Yuichiro
最終更新者:
taiyaki32p,