margin-right

概要

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

構文

<length> | <percentage> | auto

値

<length>

固定幅を指定します。使用可能な値は <length> を参照してください。</length>

<percentage>

<percentage>は常に包含ブロックの幅を基準にします。

auto

主に現在のレイアウトモードによって定義された残りの余白から、右マージンが分配されることを表すキーワードです。margin-left や margin-right に複数の auto 値があれば、計算されたスペースはすべての auto 値に均等に分けられます。次の表に動作の違いをまとめます:

display の値	float の値	position の値	auto の計算値	コメント
inline, inline-block, inline-table	どれでも	static か relative	0	インラインレイアウトモード
block, inline, inline-block, block, table, inline-table, list-item, table-caption	どれでも	static か relative	0。ただし margin-left と margin-right がどちらも auto である場合を除く。この場合は親要素内でその要素を中央寄せする値になります。	ブロックレイアウトモード
block, inline, inline-block, block, table, inline-table, list-item, table-caption	left か right	static か relative	0	ブロックレイアウトモード（フローティング要素）
table-caption を除く table-*	どれでも	どれでも	0	table-* 内部の要素はマージンを持ちません。代わりに border-spacing を使ってください
以下を除くすべて: flex, inline-flex, table-*	どれでも	fixed か absolute	0。ただし margin-left と margin-right のどちらも auto である場合を除く。この場合、もし fixed なら利用可能な幅の範囲でボーダー領域を中央寄せする値になります	絶対位置指定レイアウトモード
flex, inline-flex	どれでも	どれでも	0。ただし横方向に 0 より広いフリースペースがある場合を除く。この場合横方向のすべての auto マージンに均等に分配されます	Flexbox レイアウトモード

サンプル

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

仕様

ブラウザ実装状況