CSS margin-block 屬性

定義和用法

margin-block 屬性指定塊方向上起始和結束邊緣的外邊距，是以下屬性的簡寫：

margin-block 屬性的值可以通過不同方式設置：

margin-block: 10px 50px;

margin-block: 10px;

CSS 的 margin-block 和 margin-inline 屬性與 CSS 的 margin-top、margin-bottom、margin-left 和 margin-right 屬性非常相似，但 margin-block 和 margin-inline 屬性依賴于塊方向和行方向。

注意：相關的 CSS 屬性 writing-mode 定義了塊方向。這會影響塊的起始和結束位置以及 margin-block 屬性的結果。對于英文頁面，塊方向是向下，行方向是從左到右。

設置塊方向上兩側的外邊距：

div {
  margin-block: 35px;
}

當 <div> 元素的 writing-mode 屬性值設置為 vertical-rl 時，塊方向上元素的起始位置從頂部移動到右側，元素的結束位置從底部移動到左側。writing-mode 的變化也會影響 margin-block 的效果：

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

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"

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

Chrome	Edge	Firefox	Safari	Opera
87.0	87.0	66.0	14.1	73.0