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年7月21日⁩ by MDN contributors.

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