下面有更多 "亲自试一试" 示例。
这个margin-top
属性设置元素的上边距。
笔记:允许负值。
表中的数字指定完全支持该属性的第一个浏览器版本。
Property | |||||
---|---|---|---|---|---|
margin-top | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
margin-top:
length|auto|initial|inherit;
Value | Description | Demo |
---|---|---|
length | Specifies a fixed top margin in px, pt, cm, etc. Default value is 0px. Negative values are allowed. Read about length units | Demo ❯ |
% | Specifies a top margin in percent of the width of the containing element | Demo ❯ |
auto | The browser calculates a top margin | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
元素的顶部和底部边距有时会折叠成单个边距,该边距等于两个边距中最大的一个。
这不会发生在水平(左和右)边距上!只有垂直(顶部和底部)边距!
看下面的例子:
在上面的示例中,<p class="a"> 元素的顶部和底部边距均为 30 像素。 <p class="b"> 元素的顶部和底部边距均为 20 像素。
这意味着 <p class="a"> 和 <p class="b"> 之间的垂直边距应为 50 像素 (30 像素 + 20 像素)。但由于边距塌陷,实际边距最终变成了 30px!
CSS教程:CSS 边距
HTML DOM 参考:marginTop 属性
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!