margin-block-start
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
* Some parts of this feature may have varying levels of support.
CSS 属性 margin-block-start 定义了元素的逻辑块首外边距，并根据元素的书写模式、行内方向和文本朝向对应至实体外边距。
尝试一下
margin-block-start: 20px; writing-mode: horizontal-tb; margin-block-start: 20px; writing-mode: vertical-rl; margin-block-start: 20%; writing-mode: horizontal-tb; margin-block-start: auto; writing-mode: vertical-lr; <section id="default-example"> <div id="container"> <div class="row">One</div> <div class="row transition-all" id="example-element">Two</div> <div class="row">Three</div> </div> </section> #container { width: 300px; height: 200px; display: flex; align-content: flex-start; flex-direction: column; justify-content: flex-start; } .row { height: 33.33%; display: inline-block; border: solid #ce7777 10px; background-color: #2b3a55; color: #ffffff; flex-shrink: 0; } #example-element { border: solid 10px #ffbf00; background-color: #2b3a55; } 语法
css
/* <length> 值 */ 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: revert; margin-block-start: revert-layer; margin-block-start: unset; 根据 writing-mode、direction 和 text-orientation 所定义的值，此属性对应于 margin-top、margin-right、margin-bottom 或 margin-left 属性。
与此属性相关的有 margin-block-end、margin-inline-start 和 margin-inline-end 等定义元素的其他外边距的属性。
取值
margin-block-start 属性的取值与 margin-left 属性相同。
形式定义
形式语法
margin-block-start =
<'margin-top'>
<margin-top> =
<length-percentage> |
auto |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
示例
设置块首外边距
HTML
html
<div> <p class="exampleText">示例文本</p> </div> CSS
css
div { background-color: yellow; width: 120px; height: 120px; } .exampleText { writing-mode: vertical-lr; margin-block-start: 20px; background-color: #c8c800; } 结果
规范
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # margin-properties |
浏览器兼容性
Loading…