margin-top - CSS（层叠样式表） 编辑

Summary

 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.
是否是继承属性	否
Percentages	refer to the width of the containing block
适用媒体	visual
计算值	the percentage as specified or the absolute length
Animation type	a length
正规顺序	the unique non-ambiguous order defined by the formal grammar

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

<length> | <percentage> | auto

示例

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

说明

Specification	Status	Comment
CSS Basic Box Model margin-top	Working Draft	无改动
CSS Transitions margin-top	Working Draft	定义 margin-top 为可动画的属性.
CSS Level 2 (Revision 1) margin-top	Recommendation	去除了在inline元素的效果。
CSS Level 1 margin-top	Recommendation	最初定义了该属性

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	1.0 (1.7 or earlier)	3.0	3.5	1.0 (85)
auto value	1.0	1.0 (1.7 or earlier)	6.0 (strict mode)	3.5	1.0 (85)

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	1.0	1.0 (1)	6.0	6.0	1.0