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