CSS3基础边框border，内边距padding，外边距margin

独憩

2024-04-23 帮助1人

border

设置盒子的边框特性：

border-style表示边框的形式，一般有solid：实线；dashed：虚线；dotted：点。

也可以复合：

当两个盒子相邻时，我们希望合并其重叠的边，以至于不会变粗，使用

border-collapse:collapse;

需要注意的是，加入边框会改变盒子的大小，例如设置一个div大小为200px*200px，设置5px的边框，则总体的盒子将会是210px*210px

padding表示盒子内的内容与边框的距离，可以分布设置上下左右：

也可以复合：

学新通

跟边框一样，加padding也会导致盒子变大，在设计盒子大小的时候要综合考虑这两个因素。

常规设置：

复合设置（规则与padding）一致：

设置方块在页面居中，可以使用margin在左右方向auto的方式：

嵌套块元素塌陷：

结果表现为，两个方块都下降了50px，这就是塌陷问题

学新通

解决方法，加一行：overflow: hidden;

对于不同浏览器有自己的基础margin，故一般会手动消除其差异：（一般写在最开头）

这篇好文章是转载于：学新通技术网