margin-left
試してみましょう
二つの隣り合うボックスの垂直マージンは融合することがあります。これはマージンの相殺と呼ばれています。
まれに幅の制約がきつすぎると (つまり、 width
, margin-left
, border
, padding
, コンテンツ領域, margin-right
がすべて定義されていた場合)、 margin-left
は無視され、 auto
が設定されていたときと同じ計算値になります。
構文
/* <length> 値 */ margin-left: 10px; /* 絶対的な寸法 */ margin-left: 1em; /* 文字の寸法からの相対 */ margin-left: 5%; /* 直近のブロックコンテナーの幅からの相対 */ /* キーワード値 */ margin-left: auto; /* グローバル値 */ margin-left: inherit; margin-left: initial; margin-left: revert; margin-left: unset;
margin-left
プロパティは auto
キーワード、または <length>
や <percentage>
で指定されます。正の数、ゼロ、負の数が指定できます。
値
<length>
-
マージンの寸法を固定値で表したものです。
<percentage>
-
マージンの寸法を包含ブロックの幅に対するパーセント値で表したものです。
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 および::first-line にも適用されます。 |
継承 | なし |
パーセント値 | 包含ブロックの幅に対する相対値 |
計算値 | 指定されたパーセント値または絶対的な長さ |
アニメーションの種類 | length |
形式文法
margin-left =
<length-percentage> |
auto
<length-percentage> =
<length> |
<percentage>
例
ピクセル数とパーセント値を使用した左マージンの設定
css
.content {
margin-left: 5%;
}
.sidebox {
margin-left: 10px;
}
.logo {
margin-left: -5px;
}
仕様書
Specification |
---|
CSS Box Model Module Level 3 # margin-physical |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
margin-top
,margin-right
,margin-bottom
とmargin
一括指定- 対応付けられる論理的プロパティ:
margin-block-start
,margin-block-end
,margin-inline-start
,margin-inline-end
および一括指定のmargin-block
とmargin-inline