翻译正在进行中。
这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
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。inline direction属性是margin-inline，也可设置为margin-inline-start，和margin-inline-end。
语法
值
margin-block属性采用和margin-left属性相同的值。
正规语法
<'margin-left'>{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 | Status | Comment |
|---|---|---|
| CSS Logical Properties and Values Level 1 margin-block |
Editor's Draft | Initial definition. |
| 初始值 | 0 |
|---|---|
| 适用元素 | same as margin |
| 是否是继承属性 | 否 |
| Percentages | depends on layout model |
| 适用媒体 | visual |
| 计算值 | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto |
| Animation type | discrete |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
浏览器兼容性
这个页面上的兼容性表格是从结构化数据生成的。 如果你想贡献相关数据，请卢兰https://github.com/mdn/browser-compat-data并向我们发送请求。
Update compatibility data on GitHub
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Basic support | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Edge Mobile No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.