CSS margin 属性
❮ 上一节
CSS 参考手册
下一节 ❯
实例
将 p 元素所有四边的边距设置为35像素:
p {
margin: 35px;
}
亲自试一试 »
下面有更多实例。
定义和用法
margin 属性设置元素的边距，是以下属性的简写属性:
margin-top
margin-right
margin-bottom
margin-left
边距属性有 4 个值:
margin: 10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
边距属性有 3 个值:
margin: 10px 5px 15px;
上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
边距属性有 2 个值:
margin: 10px 5px;
上外边距和下外边距是 10px
右外边距和左外边距是 5px
边距属性有 1 个值:
margin: 10px;所有 4 个外边距都是 10px
注释: 允许使用负值。
默认值:
0
继承性:
no
支持动画:
yes, 请参阅单独的属性. 阅读有关动画的信息
测试一下
版本:
CSS1
JavaScript 语法:
object.style.margin="100px 50px"
测试一下
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
属性
margin
1.0
6.0
1.0
1.0
3.5
语法
margin: length|auto|initial|inherit;
属性值
值
描述
试一试
length
规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。 阅读长度单位
亲自试一试 »
%
以包含元素宽度的百分比指定外边距。
亲自试一试 »
auto
浏览器计算边距
亲自试一试 »
initial
将此属性设置为其默认值。请参阅 initial
亲自试一试 »
inherit
从其父元素继承此属性。请参阅 inherit
边距折叠
元素的上下边距有时会折叠为一个边距，该边距等于两个边距中最大的边距。
这不会发生在水平（左和右）页边距上！只有垂直（顶部和底部）边距！
请看以下示例:
实例
p.a { margin: 30px 0;}p.b { margin: 20px 0;}
亲自试一试 »
在上面的例子中，
元素的上下边距为 30px。
元素的上下边界为20px。
这意味着
和
之间的垂直边缘应为 50px (30px + 20px).
但由于边距折叠，实际边距为 30px！
更多实例
实例
将 p 元素的上下边距设置为 35 像素，左右边距设置为 70 像素:
p {
margin: 35px 70px;
}
亲自试一试 »
实例
将 p 元素的边距设置为顶部 35 像素，左右 70 像素，底部 50 像素:
p {
margin: 35px 70px 50px;
}
亲自试一试 »
实例
将 p 元素的边距设置为顶部 35 像素，右侧 70 像素，底部 50 像素，左侧 90 像素:
p {
margin: 35px 70px 50px 90px;
}
亲自试一试 »
相关页面
CSS 教程: CSS Margin
CSS 教程: CSS 盒子模型
HTML DOM 参考手册: margin 属性
❮ 上一节
CSS 参考手册
下一节 ❯