如我们在盒子模式那一章节看到的，外边距 (margin) 是在边框之外，并且是用来设定各个元素之间的距离。一个盒子有四个边，所以我们可以对这四个边逐一设定：
1 margin-top (上边界)
2 margin-right (右边界)
3 margin-bottom (下边界)
4 margin-left (左边界)
第五个属性，margin，是用来作为同时设定四个边的捷径属性。
有三种方式可以设定边界，分别为长度、百分比、以及 'auto'。我们来看以下的例子：
#container {
margin-top:5px;
margin-left:10%;
margin-right:auto;
margin-bottom:20px;
border: 1px solid 000000;
}以下的 HTML 代码，
<div id="container"> 这是边界的例子。 </div>
效果
在这裡，上边界为 5px，左边界为 10%，下边界为 20px。
边界捷径
所有四个边的边界可以同时由 margin 属性设定。它的语法如下：
margin: [上面边界值] [右边边界值] [下面边界值] [左边边界值]
在这里，顺序非常重要。第一个值一定是上边界的值，第二个值一定是右边界的值，第三个值一定是下边界的值，而第四个值一定是左边界的值。
示例
设置 p 元素的 4 个外边距：
p
{ margin:2cm 4cm 3cm 4cm;
}
此文章本站原创，地址 https://www.vxzsk.com/760.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：spring boot 集成EHCache
下一篇：css 边框border
^