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 July 2015.
試してみましょう
隣り合う二つのボックスの垂直マージンは融合することがあります。これはマージンの相殺と呼ばれています。
構文
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%;
}
.sidebox {
margin-right: 10px;
}
.logo {
margin-right: -5px;
}
仕様書
Specification |
---|
CSS Box Model Module Level 3 # margin-physical |
ブラウザーの互換性
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