CSS margin-block 属性
- 前のページ margin
- 次のページ margin-block-end
定義と使用法
margin-block 属性はブロック方向の始めと終わりの余白を指定し、以下の属性の短縮形です：
margin-block 属性の値は異なる方法で設定できます：
margin-block属性が2つの値を持っている場合：
margin-block: 10px 50px;
- 左端の余白は10pxです
- 終点の外側マージンは50pxです
margin-block属性に値が1つある場合：
margin-block: 10px;
- 始点と終点の外側マージンがそれぞれ10pxです
CSSの margin-block および margin-inline 属性はCSSの margin-top、margin-bottom、margin-left および margin-right 属性は非常に似ていますが、margin-blockと margin-inline 属性はブロック方向と行方向に依存します。
注意：関連するCSS属性に影響を与えます。 writing-mode ブロック方向を定義します。これはブロックの始点と終点および margin-block 属性の結果です。英語ページでは、ブロック方向は下向き、行方向は左から右です。
例
例1
ブロック方向上の両側のマージンを設定します：
div {
margin-block: 35px;
}
例2
<div>要素の writing-mode 属性値がvertical-rlに設定されている場合、ブロック方向上の要素の始点は上から右に移動し、要素の終点は下から左に移動します。writing-modeの変更もmargin-blockの効果に影響します：
#parentDiv {
writing-mode: vertical-rl;
}
#myDiv {
margin-block: 10px 50px;
}
CSS文法
margin-block: auto|length|initial|inherit;
属性値
| 値 | 説明 |
|---|---|
| auto | デフォルト値。要素のデフォルトのmargin-block値です。 |
| length |
px、pt、cmなどの単位でmargin-blockを指定します。負値も許可されます。 参照してください：CSS 単位。 |
| % | 親要素に対して行方向上のサイズのパーセンテージでmargin-blockを指定します。 |
| initial | この属性をデフォルト値に設定します。参照してください： initial。 |
| inherit | この属性は、親要素からこの属性を継承します。参照してください： inherit。 |
技術的詳細
| デフォルト値： | auto |
|---|---|
| 継承性： | いいえ |
| アニメーション制作： | サポートされています。参照してください：アニメーション関連属性。 |
| バージョン： | CSS3 |
| JavaScript文法： | object.style.marginBlock="50px 20px" |
ブラウザのサポート
テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。
| クローム | エッジ | ファイアフォックス | サファリ | オペラ |
|---|---|---|---|---|
| 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
関連ページ
- 前のページ margin
- 次のページ margin-block-end
