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 |
| 是否是继承属性 | 否 |
| Percentages | depends on layout model |
| 计算值 | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto |
| Animation type | a length |
Syntax
Values
margin-block-start 属性有着和 margin-left 属性一样的值.
Formal syntax
案例
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 | Status | Comment |
|---|---|---|
| CSS Logical Properties and Values Level 1 margin-block-start |
Editor's Draft | 初始定义 |
Browser compatibility
BCD tables only load in the browser
同样推荐
- 标记的物理属性:
margin-top,margin-right,margin-bottom, andmargin-left writing-mode,direction,text-orientation