CSS 盒子模型——边框、内边距、外边距

盒子模型的组成

• 盒子模型包括：边框、内边距、外边距和实际内容，具体参见下图：

边框

• 边框由三部分组成，分别是：边框宽度，边框样式以及边框颜色，具体参见下表：

属性	说明
border-width	定义边框粗细，单位是px
border-style	定义边框的样式，主要记住：solid（实线）、dashed（虚线）、dotted（点线）
border-color	定义边框的颜色

• 边框的复合写法：

1. border:1px solid blue; （没有顺序）
2. border-top:1px solid blue （没有顺序）

• 表格的细线边框：

border-collapse:collapse    ——表示相邻边框合并在一起

• 边框会额外增加盒子的实际大小，因此我们有两种方案解决：

1. 测量盒子大小的时候，不要量取边框
2. 如果测量的时候包含了边框，则需要width/height减去边框宽度

内边距

• padding属性用于设置内边距，即边框与内容之间的距离，具体参见下表：

属性	说明
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

• 内边距的复合属性，具体参见下表：

值的个数	说明
padding:5px	1个值，代表上下左右都有5px的内边距
padding:5px 10px	2个值，代表上下内边距是5px，左右内边距是10px
padding:5px 10px 15px	3个值，代表上内边距是5px，左右内边距是10px，下内边距是15px
padding:5px 10px 15px 20px	4个值，上下左右内边距分别是5px 15px 20px 10px，顺时针

• 内边距会额外增加盒子的实际大小。如果想要保证盒子跟效果图的大小一致，则应该让width/height减去多出来的内边距大小。
• 如果盒子本身没有设置width/height属性，则此时padding不会撑开盒子大小。

外边距

• margin属性用于设置外边距，即控制盒子和盒子之间的距离，具体参见下表：

属性	说明
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

• margin的复合属性和padding是完全一致的，这里就不一一说明了。

• 外边距的典型应用：

1、外边距可以让块级盒子水平居中，但必须满足以下两个条件：
（1）盒子必须指定了宽度
（2）盒子左右的外边距必须都设置为auto，以下三种都可以：
— margin-left:auto; margin-right:auto;
— margin:auto;
— margin:0 auto;
3、行内元素和行内块元素水平居中的方法是：给其父元素添加 text-align:center

• 外边距合并：

1、相邻块元素垂直外边距的合并
定义：当上下相领的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距取两个值中的较大者。
解决方案：尽量只给一个盒子添加margin值。
2、嵌套块元素垂直外边距的塌陷
定义：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距，同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
（1）为父元素设置上边框
（2）为父元素设置上内边距
（3）为父元素设置overflow:hidden
（4）浮动
（5）固定定位、绝对定位

---

微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！