margin-block

Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

**margin-block**这个CSS属性定义了一个元素的逻辑块开始和结束边距，根据元素的写入模式、方向性和文本方向映射到物理边界。

/* 有长度的具体的值 */
margin-block: 10px 20px;  /* 一个绝对的长度值 */
margin-block: 1em 2em;   /* 相对于文本大小的值 */
margin-block: 5% 2%;    /* 相对于最近的块容器宽度的值 */
margin-block: 10px; /* 设置开始值和结束值 */

/* 关键字 值 */
margin-block: auto;

/* 全局 值 */
margin-block: inherit;
margin-block: initial;
margin-block: unset;

这些值对应的是margin-top和margin-bottom，或者 margin-right，和margin-left，这些属性取决于writing-mode，direction，和text-orientation。

这些值可以单独设置为margin-block-start和margin-block-end (en-US)。inline direction 属性是margin-inline (en-US)，也可设置为margin-inline-start (en-US)，和margin-inline-end (en-US)。

语法

值

margin-block属性采用和margin-left属性相同的值。

形式语法

margin-block = 
  <'margin-top'>{1,2}

示例

HTML

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  margin-block: 20px 40px;
  background-color: #c8c800;
}

规范

Specification
CSS Logical Properties and Values Level 1
# propdef-margin-block
初始值as each of the properties of the shorthand:
适用元素same as margin
是否是继承属性否
Percentagesdepends on layout model
计算值as each of the properties of the shorthand:
  • margin-block-start: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
  • margin-block-end (en-US): if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
Animation typea length

浏览器兼容性

BCD tables only load in the browser

参见