margin-top

Summary

The effect of the CSS margin-top property on the element box margin-top 属性用来设置元素的顶部外边距,你也可以使用负值。

这个属性对于不可替换的 inline 元素没有效果,比如 <tt> 或者 <span>.

初始值0
适用元素all elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter and ::first-line.
是否是继承属性
Percentagesrefer to the width of the containing block
计算值the percentage as specified or the absolute length
Animation typea length

Syntax

/* <length> values */
margin-top: 10px;        /* 绝对长度 */
margin-top: 1em;         /*相对于字体大小 */
margin-top: 5%;          /*相对于最相邻的父级元素块(block)的宽度*/

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

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

Values

<length>

设置固定长度 参考<length> 来查看合适的值。

<percentage>

百分比值<percentage> 总是相对于 父元素块的宽度

auto

参考 margin.

Formal syntax

margin-top = 
<length-percentage> |
auto

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

示例

.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

浏览器兼容性

BCD tables only load in the browser