margin

概要

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

  • 初期値 0
  • 適用対象 テーブル関連要素を除く全ての要素。但し、table-captiontableinline-table には適用可能
  • 継承 継承しない
  • 相対値の基準 最も近いブロックレベルの先祖の width を基準とする
  • メディア visual
  • 計算値 指定された <割合> 、または絶対値の <長さ>

構文

margin:  <length>{1,4} | <割合>{1,4} | inherit | auto

次に示す値を 1 ~ 4 つ指定してください。指定数によって指定方向が変化します。

<length>
固定幅を指定します。負の値が許可されています。使用可能な単位は <length> を参照してください。
<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 草案 有意な変更点は無し
CSS Transitions 草案 margin がアニメーション可能要素と定義された
CSS Level 2 (Revision 1) 勧告 インライン要素に対する効果の削除
CSS Level 1 勧告 最初期の仕様定義

ブラウザ実装状況

機能 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

関連情報

Document Tags and Contributors

Contributors to this page: sosleepy, teoli, ethertank, Yuichiro
最終更新者: ethertank,
サイドバーを隠す