首页技术文章正文

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

更新时间:2021-03-15 来源:黑马程序员 浏览量:

1577370495235_学IT就到黑马程序员.gif


网页是由多个盒子排列而成的,要想拉开盒子与盒子之间的距离,合理地布局网页,就需要为盒子设置外边距。所谓外边距指的是标签边框与相邻标签之间的距离。在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前端培训班

分享到:
在线咨询 我要报名
和我们在线交谈!