margin-right
margin-right
は CSS のプロパティで、要素の右側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
二つの隣り合うボックスの垂直マージンは融合することがあります。これはマージンの相殺と呼ばれています。
構文
/* <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
関連情報
margin-top
,margin-bottom
,margin-left
とmargin
一括指定- 対応付けられる論理的プロパティ:
margin-block-start
,margin-block-end
,margin-inline-start
,margin-inline-end
および一括指定のmargin-block
とmargin-inline