首页技术文章正文

怎样给盒子模型设置外边距？

更新时间:2021年03月15日17时20分来源:传智教育浏览次数:

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

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

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

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

.num{ margin:0 auto;}

注意：

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

猜你喜欢：

最新资讯