margin-right

margin-right は CSS のプロパティで、要素の右側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。

二つの隣り合うボックスの垂直マージンは融合することがあります。これはマージンの相殺と呼ばれています。

構文

/* <length> 値 */
margin-right: 20px;  /* 絶対的な寸法 */
margin-right: 1em;   /* 文字の寸法からの相対 */
margin-right: 5%;    /* 直近のブロックコンテナーの幅からの相対 */

/* キーワード値 */
margin-right: auto;

/* グローバル値 */
margin-right: inherit;
margin-right: initial;
margin-right: unset;

margin-right プロパティは auto キーワード、または <length> や <percentage> で指定されます。正の数、ゼロ、負の数が指定できます。

値

<length>

固定値によるマージンの寸法です。

<percentage>

包含ブロックの width に対するパーセントによるマージンの寸法です。

auto

右マージンは未使用の水平方向の余白を共有します。これは主に使用されているレイアウトモードによって決定されます。 margin-left と margin-right の両方が 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-` すべて、ただし `table-caption` を除く*	任意	任意	`0`	内部の `table-*` 要素にはマージンがありません。代わりに `border-spacing` を使用してください
`flex`、 `inline-flex`, `table-` 以外のすべて*	任意	`fixed` または `absolute`	`0`。ただし `margin-left` と `margin-right` が共に `auto` に設定されていた場合は、ボーダー領域を `width` の中で中央揃えする値に設定されます（固定されている場合）。	絶対位置指定配置モード
`flex`, `inline-flex`	任意	任意	`0`。ただし、水平に正の余白がある場合は、 `auto` を指定したすべてのマージンに均等に割り振られます。	フレックスボックス配置モード

公式定義

初期値	`0`
適用対象	`table-caption`, `table`, `inline-table` 以外の表の `display` 種別を除くすべての要素。 `::first-letter`および`::first-line` にも適用されます。
継承	なし
パーセント値	包含ブロックの幅に対する相対値
計算値	指定されたパーセント値または絶対的な長さ
アニメーションの種類	length

形式文法

<length> | <percentage> | auto

例

ピクセル数とパーセント値を使用した右マージンの設定

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

仕様書

仕様書	状態	備考
CSS Basic Box Model margin-right の定義	勧告候補	目立った変更なし。
CSS Flexible Box Layout Module margin-right の定義	勧告候補	フレックス項目での `margin-right` の挙動を定義。
CSS Level 2 (Revision 1) margin-right の定義	勧告	CSS1 と同様、ただしインライン要素での効果は削除。
CSS Level 1 margin-right の定義	勧告	初回定義

ブラウザーの互換性

BCD tables only load in the browser