Mafuta wa CSS margin-block

Nyuma margin
Pya zaidi margin-block-end

Ufafanuzi na matumizi

margin-block Uga huu unaangazia mawendo ya kinywa cha kati kwa kina na kizito cha kinywa cha kati, unapata jina kwa uga hizo:

margin-block-start
margin-block-end

margin-block Thamani ya uga huu inaweza kuwa inayotengenezwa kwa sababu tofauti:

Ikiwa kuna thamani mbili ya kiwango kwa uga margin-block:

margin-block: 10px 50px;

Mwongozo wa kijumu cha kinywa cha kati ni 10px
结束边缘的外边距为 50px

如果 margin-block 属性有一个值：

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

当

元素的 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。允许负值。请参阅：Viwango ya Kifungu cha CSS.
%	指定相对于父元素在行方向上大小的百分比 margin-block。
initial	Inasaidia kwa sababu ya chaguo cha kuzingatia kwa sababu ya kina kina kina. Tazama: initial.
inherit	Inasaidia kusambaa kwa sababu ya kina ya kina kina. Tazama: inherit.

Mafuriko ya Teknolojia

Chaguo cha kuzingatia:	auto
Kusambaa:	Hakuna
Harakati ya uharibifu:	Inahakiki. Tazama:Jambo la uharibifu wa harakati.
Muda wa:	CSS3
Inayotumika kwa KiJavaScript:	object.style.marginBlock="50px 20px"

Muhimu wa kusakinisha kwa programu ya kusoma intaneti

Jinadili ya tablica inaeleza barivyo wa programu ya kusoma intaneti ambao inahakiki sababu hiyo kwa sababu ya barivyo ya kwanza ya kusakinisha kwa sababu hiyo.