如何设置盒子模型的外边距？

网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子设置外边距。所谓外边距指的是标签边框与相邻标签之间的距离。在CSS中margin属性用于设置外边距，它是一个复合属性，与内边距padding的用法类似，设置外边距的方法如下。

margin-top:上外边距;
margin-right:右外边距;
margin-bottom:下外边距;
margin-left:左外边距;
margin:上外边距 [右外边距 下外边距 左外边距];

margin取值遵循值复制的原则，其取1~4个值的情况与padding相同，但是外边距可以使用负值，使相邻标签发生重叠。

当对块级元素（将在5.4小节详细介绍）应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中，实际工作中常用这种方式进行网页布局，示例代码如下。

.num{ margin:0 auto;}

注意：

如果没有明确定义标签的宽高时，内边距相比外边距的容错率高。




猜你喜欢：

【前端】盒子模型的边框样式属性和应用技巧讲解

JavaScript中如何获取标签属性？

CSS3盒子模型边框怎样实现圆角效果？

黑马程序员web前端培训班