margin-top

**margin-top** CSS 属性设置元素顶部的 边距区域。 正值使其远离其邻居，而负值使其更靠近。

试一试

此属性对非 替换 内联元素（如 <span> 或 <code>）没有影响。

语法

css
/* <length> values */
margin-top: 10px; /* An absolute length */
margin-top: 1em; /* relative to the text size */
margin-top: 5%; /* relative to the nearest block container's width */

/* Keyword values */
margin-top: auto;

/* Global values */
margin-top: inherit;
margin-top: initial;
margin-top: revert;
margin-top: revert-layer;
margin-top: unset;

margin-top 属性指定为关键字 auto，或 <length>，或 <percentage>。 它的值可以为正、零或负。

Values

<length>

边距大小作为固定值。

<percentage>

边距大小作为百分比，相对于包含块的内联大小（水平语言中的宽度，由 writing-mode 定义）。

auto

浏览器会选择一个合适的 value 来使用。 请参见 margin。

正式定义

初始值0
应用于所有元素，除了具有表格 display 类型（不是 table-caption、table 和 inline-table）的元素。 它也适用于 ::first-letter。
继承no
Percentages指的是包含块的宽度
计算值指定的百分比或绝对长度
动画类型一个 长度

正式语法

margin-top = 
  <length-percentage>  |
  auto                 

<length-percentage> = 
  <length>      |
  <percentage>

示例

设置正负顶部边距

css
.content {
  margin-top: 5%;
}
.sidebox {
  margin-top: 10px;
}
.logo {
  margin-top: -5px;
}
#footer {
  margin-top: 1em;
}

规范

规范
CSS 盒模型模块级别 3
# margin-physical

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅