CSS margin-inline 属性
- 前のページ margin-bottom
- 次のページ margin-inline-end
定義と使用法
margin-inline 属性は行方向上の開始と終了時の外側マージンを指定し、以下の属性のショートカット属性です：
margin-inline 属性の値はさまざまな方法で設定できます：
margin-inline 属性に2つの値があれば：
margin-inline: 10px 50px;
- 開始時の外側マージンは 10px です
- 終了時の外側マージンは 50px です
margin-inline 属性に値があれば：
margin-inline: 10px;
- margin-inline: 10px;
の開始時と終了時の外側マージンがすべて 10px です margin-inline および margin-block 属性は CSS の margin-top、margin-bottom、margin-left および margin-right 属性は非常に似ていますが、 margin-inline および margin-block 属性はブロック方向と行内方向に依存しています。
注意：関連する CSS 属性 writing-mode および direction 行内方向を定義します。これは要素の開始位置と終了位置、および margin-inline-end 属性の結果に影響を与えます。英語のページでは、ブロック方向は下、行内方向は左から右です。
例
例 1
行方向の両側に外側マージンを設定します：
div {
margin-inline: 35px;
}
例 2
<div>要素の writing-mode 属性値が 'vertical-rl' に設定されている場合、行方向は下です。結果として、要素の開始位置は左側から上に、終了位置は右側から下に移動します：
div {
margin-inline: 10px 50px;
writing-mode: vertical-rl;
}
例 3
<div>要素の direction 属性値が 'rtl' に設定されている場合、行方向は右から左です。結果として、要素の開始位置は左側から右側に、終了位置は右側から左側に移動します：
div {
margin-inline: 10px 50px;
direction: rtl;
}
CSS 文法
margin-inline: auto|length|initial|inherit;
属性値
| 値 | 説明 |
|---|---|
| auto | デフォルト値。要素のデフォルトの margin-inline 値です。 |
| length |
px、pt、cm などの単位で margin-inline を指定します。負値も許可されます。 参照してください：CSS 単位。 |
| % | 親要素に対して行方向上のサイズのパーセンテージで margin-inline を指定します。 |
| initial | この属性をデフォルト値に設定します。参照してください： initial。 |
| inherit | 親要素からこの属性を継承します。参照してください： inherit。 |
技術的詳細
| デフォルト値： | auto |
|---|---|
| 継承性： | いいえ |
| アニメーション作成： | サポートしています。参照してください：アニメーション関連属性。 |
| バージョン： | CSS3 |
| JavaScript 文法： | object.style.marginInline="50px 10px" |
ブラウザのサポート
テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
関連ページ
- 前のページ margin-bottom
- 次のページ margin-inline-end
