margin-right

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

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

試してみましょう

margin-right: 1em;

margin-right: 10%;

margin-right: 10px;

margin-right: 0;

<section id="default-example"> <div id="container"> <div class="col"></div> <div class="col transition-all" id="example-element"></div> <div class="col"></div> </div> </section>

#container { width: 300px; height: 200px; display: flex; align-content: flex-start; justify-content: flex-start; } .col { width: 33.33%; border: solid #5b6dcd 10px; background-color: rgba(229, 232, 252, 0.6); flex-shrink: 0; } #example-element { border: solid 10px #ffc129; background-color: rgba(255, 244, 219, 0.6); }

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

構文

css

/* <length> 値 */ margin-right: 20px; /* 絶対的な寸法 */ margin-right: 1em; /* 文字の寸法からの相対 */ margin-right: 5%; /* 直近のブロックコンテナーの幅からの相対 */ /* キーワード値 */ margin-right: auto; /* グローバル値 */ margin-right: inherit; margin-right: initial; margin-right: revert; margin-right: revert-layer; margin-right: unset;

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

値

<length>

マージンの寸法を固定値で表したものです。

<percentage>

マージンの寸法を包含ブロックのインラインサイズ（writing-mode で横書き言語と定義されている場合は 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` の中で境界領域が中央揃えされる値が設定される (fixed の場合)。	絶対位置指定レイアウトモード
`flex`, `inline-flex`	任意	任意	`0`。ただし、水平方向に正の余白がある場合を除く。この場合、 `auto` を指定したすべてのマージンに均等に分配される。	フレックスボックスレイアウトモード

公式定義

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

形式文法

margin-right = 
 <length-percentage> |
 auto |
 <anchor-size()> 

<length-percentage> = 
 <length> |
 <percentage> 

<anchor-size()> = 
 anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? ) 

<anchor-name> = 
 <dashed-ident> 

<anchor-size> = 
 width |
 height |
 block |
 inline |
 self-block |
 self-inline

例

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

css

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

仕様書

Specification
CSS Box Model Module Level 3 # margin-physical

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年11月9日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content