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 |
是否是继承属性 | 否 |
Percentages | depends on layout model |
计算值 | as each of the properties of the shorthand:
|
Animation type | a length |
浏览器兼容性
BCD tables only load in the browser