此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
margin-top
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
尝试一下
margin-top: 1em;margin-top: 10%;margin-top: 10px;margin-top: 0;<section> <div> <div></div> <div></div> <div></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; flex-shrink: 0;}#example-element { border: solid 10px #ffbf00; background-color: #2b3a55;}语法
css
/* <length> 值 */margin-top: 10px; /* 绝对长度 */margin-top: 1em; /* 相对与文本的大小 */margin-top: 5%; /* 相对于最近的块容器的宽度 *//* 关键字值 */margin-top: auto;/* 全局关键字值 */margin-top: inherit;margin-top: initial;margin-top: revert;margin-top: revert-layer;margin-top: unset;margin-top 属性可以用关键字auto、<length> 或<percentage> 来设置。其值可以是正值、负值或零。
值
<length>设置固定边距大小。
<percentage>相对于包含块的内联尺寸（对于竖排语言则是宽度，这由
writing-mode定义）的百分比边距大小。auto浏览器选择一个合适的值来使用。参见
margin。
形式语法
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
示例
将上边距设置为正值和负值
css
.content { margin-top: 5%;}.sidebox { margin-top: 10px;}.logo { margin-top: -5px;}#footer { margin-top: 1em;}规范
| Specification |
|---|
| CSS Box Model Module Level 3 # margin-physical |