概要
margin-left プロパティは、要素の左に必要な余白を設定します。負の値も指定可能です。
| 初期値 | 0 |
|---|---|
| 適用対象 | テーブル系要素を除く全ての要素。ただし、table-caption、table、inline-table には適用できます。. It also applies to ::first-letter. |
| 継承 | 不可 |
| 相対値の基準 | 包含ブロックの幅 |
| メディア | visual |
| 計算値 | 指定されたパーセンテージ値または絶対的な長さ |
| アニメーションの可否 | 可。 の値として補完しますlength |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
<length> | <percentage> | auto
値
- <length>
- 固定幅を指定します。使用可能な値は
<length>を参照してください。 - <percentage>
<percentage>は常に包含ブロックの幅を基準にします。- auto
marginを参照してください。
例
.content { margin-left: 5%; }
.sidebox { margin-left: 10px; }
.logo { margin-left: -5px; }
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Basic Box Model margin-left の定義 |
草案 | 有意な変更点は無し |
| CSS Transitions margin-left の定義 |
草案 | margin-left がアニメーション可能プロパティと定義された |
| CSS Flexible Box Layout Module margin-left の定義 |
勧告候補 | flex box での margin-left の挙動を定義 |
| CSS Level 2 (Revision 1) margin-left の定義 |
勧告 | インライン要素への効果が削除された |
| CSS Level 1 margin-left の定義 |
勧告 | 最初期の仕様 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | 1.0 (1.7 or earlier) | 3.0 | 3.5 | 1.0 (85) |
auto 値 |
1.0 | 1.0 (1.7 or earlier) | 6.0 (strict mode) | 3.5 | 1.0 (85) |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | 1.0 (1) | 6.0 | 6.0 | 1.0 |