CSS margin-block-end 属性

定義と使用方法

margin-block-end 属性はブロック方向の終了時の外側マージンを指定します。

CSS の margin-block および margin-inline 属性は CSS の margin-top、margin-bottom、margin-left および margin-right 属性は非常に似ていますが、 margin-block および margin-inline 属性はブロック方向と行方向に依存しています。

注意：関連する CSS 属性 writing-mode ブロック方向を定義します。これにより、ブロックの始まりと終わりの位置および margin-block-end 属性の結果です。英語ページでは、ブロック方向は下方向で、行方向は左から右です。

例

例 1

ブロック方向の終了時の外側マージンを設定します：

div {
  margin-block-end: 35px;
}

実際に試してみてください

例 2

when the <div> element's writing-mode 属性値が vertical-rl に設定されている場合、ブロック方向は右から左です。結果として、要素の終了位置は左側に移動します。したがって、writing-mode の変更も margin-block-end の効果に影響します：

#parentDiv {
  writing-mode: vertical-rl;
}
#myDiv {
  margin-block-end: 50px;
}

実際に試してみてください

CSS 文法

margin-block-end: auto|length|initial|inherit;

属性値

値 説明
auto デフォルト値。要素のデフォルトの外側マージンです。
length

距離を指定します。単位は px、pt、cm などです。負値も許可されます。

参照してください：CSS 単位。
% 親要素に対して行方向に基づくパーセンテージ距離を指定します。
initial この属性をデフォルト値に設定します。参照してください： initial。
inherit 親要素からこの属性を継承します。参照してください： inherit。

技術的詳細

デフォルト値： auto
継承性： いいえ
アニメーション制作： サポートしています。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript 文法： object.style.marginBlockEnd="20px"

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

クロム エッジ ファイアフォックス サファリ オペラ
87.0 87.0 41.0 12.1 73.0

相关页面

参考：CSS margin-block 属性

参考：CSS margin-block-start 属性

参考：CSS margin-bottom 属性

参考：CSS margin-inline 属性

参考：CSS margin-left 属性

参考：CSS margin-right 属性

参考：CSS margin-top 属性

参考：CSS writing-mode 属性