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 |
| 是否适用于 CSS 动画 | yes, as 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 | 最初定义了该属性 |
浏览器兼容性
| 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 |