margin-block-start

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

margin-block-start CSS 属性定义了一个元素的逻辑块的开始边距，是用来根据元素的书写模式，方向和文本方向进行实际边界的衡量。

/* <length> values */
margin-block-start: 10px;  /* 绝对长度 */
margin-block-start: 1em;   /* 文本的相对大小 */
margin-block-start: 5%;    /* 相对于最近块容器的大小 */

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

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

margin-top, margin-right, margin-bottom, or margin-left 属性对应于 writing-mode, direction, 和text-orientation属性定义的值。

它涉及到 margin-block-end (en-US), margin-inline-start (en-US),和 margin-inline-end (en-US)属性，这些属性是用来定义其它元素的边界。

初始值0
适用元素same as margin
是否是继承属性否
Percentagesdepends on layout model
计算值if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
Animation typea length

Syntax

Values

margin-block-start 属性有着和 margin-left 属性一样的值。

Formal syntax

margin-block-start = 
  <'margin-top'>

案例

HTML Content

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

CSS Content

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

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

Specification

Specification
CSS Logical Properties and Values Level 1
# margin-properties

Browser compatibility

BCD tables only load in the browser

同样推荐