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 Status Comment
CSS Box Model
margin-top
Candidate Recommendation 无改动
CSS Transitions
margin-top
Working Draft 定义 margin-top 为可动画的属性。
CSS Level 2 (Revision 1)
margin-top
Recommendation 去除了在 inline 元素的效果。
CSS Level 1
margin-top
Recommendation 最初定义了该属性

浏览器兼容性

BCD tables only load in the browser