顶部边距 | margin-top
margin-top
margin-top 属性用来设置元素的顶部外边距，你也可以使用负值。
/* <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: unset;
| 初始值 | 0 |
|---|---|
| 适用元素 | all elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter. |
| 是否是继承属性 | no |
| 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 |
语法
该margin-top属性被指定为关键字auto，或<length>或<percentage>。它的值可以是正值，零值或负值。
值
<length>设置固定长度 参考<length>来查看合适的值.<percentage>百分比值<percentage>总是相对于 父元素块的宽度auto参考margin.
正式语法
<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 ModelThe definition of 'margin-top' in that specification. | Working Draft | No significant change |
| CSS TransitionsThe definition of 'margin-top' in that specification. | Working Draft | Defines margin-top as animatable. |
| CSS Level 2 (Revision 1)The definition of 'margin-top' in that specification. | Recommendation | Removes its effect on inline elements. |
| CSS Level 1The definition of 'margin-top' in that specification. | Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 3.0 | 3.5 | 1.0 (85) |
| auto value | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 6.0 (strict mode) | 3.5 | 1.0 (85) |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1) | 6.0 | 6.0 | 1.0 |
