Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

この記事は編集レビューを必要としています。ぜひご協力ください

概要

margin CSSプロパティは、四方全ての余白を設定します。margin プロパティは、単一方向の margin を設定するプロパティ ( margin-top / margin-right / margin-bottom / margin-left ) を同時に全方向に対して指定する為のショートハンド・プロパティです。
負の値を指定する事も出来ます。

初期値以下の各プロパティのショートハンドとして補完します:
適用対象テーブル系要素を除く全ての要素。ただし、table-captiontableinline-table には適用できます。. It also applies to ::first-letter.
継承不可
相対値の基準包含ブロックの幅
メディアvisual
計算値以下の各プロパティのショートハンドとして補完します:
  • margin-bottom: 指定されたパーセンテージ値または絶対的な長さ
  • margin-left: 指定されたパーセンテージ値または絶対的な長さ
  • margin-right: 指定されたパーセンテージ値または絶対的な長さ
  • margin-top: 指定されたパーセンテージ値または絶対的な長さ
アニメーションの可否可。 の値として補完します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,