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

概要

margin-right プロパティは、要素の右にマージンを設定します。負の値も許可されています。

初期値0
適用対象テーブル系要素を除く全ての要素。ただし、table-captiontableinline-table には適用できます。. It also applies to ::first-letter.
継承不可
相対値の基準包含ブロックの幅
メディアvisual
計算値指定されたパーセンテージ値または絶対的な長さ
アニメーションの可否可。 の値として補完しますlength
正規順序形式文法で定義される一意のあいまいでない順序

構文

<length> | <percentage> | auto

<length>
固定幅を指定します。使用可能な値は <length> を参照してください。</length>
<percentage>
<percentage>は常に包含ブロックのを基準にします。
auto
主に現在のレイアウトモードによって定義された残りの余白から、右マージンが分配されることを表すキーワードです。margin-leftmargin-right に複数の auto 値があれば、計算されたスペースはすべての auto 値に均等に分けられます。次の表に動作の違いをまとめます:
display の値 float の値 position の値 auto の計算値 コメント
inline, inline-block, inline-table どれでも staticrelative 0 インラインレイアウトモード
block, inline, inline-block, block, table, inline-table, list-item, table-caption どれでも staticrelative 0。ただし margin-leftmargin-right がどちらも auto である場合を除く。この場合は親要素内でその要素を中央寄せする値になります。 ブロックレイアウトモード
block, inline, inline-block, block, table, inline-table, list-item, table-caption leftright staticrelative 0 ブロックレイアウトモード(フローティング要素)
table-caption を除く table-* どれでも どれでも 0 table-* 内部の要素はマージンを持ちません。代わりに border-spacing を使ってください
以下を除くすべて: flex, inline-flex, table-* どれでも fixedabsolute

0。ただし margin-leftmargin-right のどちらも auto である場合を除く。この場合、もし fixed なら利用可能な幅の範囲でボーダー領域を中央寄せする値になります

絶対位置指定レイアウトモード
flex, inline-flex どれでも どれでも 0。ただし横方向に 0 より広いフリースペースがある場合を除く。この場合横方向のすべての auto マージンに均等に分配されます Flexbox レイアウトモード

サンプル

.content { margin-right: 5%; }
.sidebox { margin-right: 10px; }
.logo    { margin-right: -5px; }

仕様

仕様書 策定状況 コメント
CSS Basic Box Model
margin-right の定義
草案 有意な変更は無し
CSS Transitions
margin-right の定義
草案 margin-right が「アニメーション可能」要素と定義された
CSS Flexible Box Layout Module
margin-right の定義
勧告候補 flex item での margin-right の挙動を定義
CSS Level 2 (Revision 1)
margin-right の定義
勧告 インライン要素に対する効果の削除
CSS Level 1
margin-right の定義
勧告 最初期の仕様

ブラウザ実装状況

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

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: Prinz_Rana, Simplexible, fscholz, Sebastianz, ethertank, sosleepy, Yuichiro
 最終更新者: Prinz_Rana,