【CSS 盒子模型 (下)】：padding 和 margin
1、概述
大家好，我是翼同学，今天的笔记内容是：
盒子模型中的：
填充区（内边距
padding）空白区（外边距
margin）
2、填充区和空白区
padding
填充区就是边框和实际内容之间的内边距，用属性 padding 表示。
实例如下：
padding: 10px;：上下左右设置 10px 内边距
padding: 10px 20px;：上下内边距 10px，左右内边距为 20px
padding: 10px 20px 30px;：上内边距 10px，左右内边距 20px，下内边距 30px
padding: 10px 20px 30px 40px;：上内边距 10px，右内边距 20px，下内边距 30px，左内边距 40px
当然，padding 属性也可以细分到每一边：
padding-left：左内边距；
padding-right：右内边距；
padding-top：上内边距；
padding-bottom：下内边距。
小结：
padding属性定义元素的内边距，也就是元素边框与元素内容之间的空白区域。该属性可以接受长度值，也可以用百分比值，此时百分比是相对于父元素的宽度width计算的。举个例子：div { padding: 10% }用于将盒子的内边距设置为父元素width的 10%。内边距属性可以细分到每一边的属性，也可以通过不同的取值设置不同的样式。
撑开盒子
需要注意的是，当内容和边框之前设定了内边距，那么这段距离会影响到盒子的实际大小。因此，设置内边距会撑开盒子，也就是填充的距离会加到盒子的总宽度。
举个例子：
但是一旦加了内边距padding: 20px;后，盒子的大小就不止 400×200 了，如下所示：
那么，如何保证盒子和效果图的大小保持一致？有两种解决方法：
让总宽度 width 和总长度 height 减去多出来的内边距
设置 box-size 属性，也就是这串代码：
box-sizing: border-box;
方法一很简单，手动计算，自动减去内边距再赋值设置盒子的大小。
而方法二更简单，直接设置 box-sizing 属性。这使得对象的实际宽度就等于设置的 width 值，即使定义有 border 值和 padding 也不会改变对象的实际宽度。
举个例子：
效果如下：
margin
margin 属性用于设置外边距，一般用于控制盒子之间的距离。
margin-top：上外边距
margin-right：右外边距
margin-left：左外边距
margin-bottom：下外边距
也 padding 一样，margin 也接受1~4个值，如下所示：
margin: 10px;：上下左右设置 10px 外边距
margin: 10px 20px;：上下外边距 10px，左右内外边距为 20px
margin: 10px 20px 30px;：上外边距 10px，左右外边距 20px，下外边距 30px
margin: 10px 20px 30px 40px; ：上外边距 10px，右外边距 20px，下外边距 30px，左外边距 40px
3、写在最后
好了，今天的笔记就记到这里。
版权声明: 本文为 InfoQ 作者【翼同学】的原创文章。
原文链接:【http://xie.infoq.cn/article/39c9bd98164ed60c5980e1ff5】。文章转载请联系作者。
知行合一 2022.08.02 加入
@珠海科技学院
评论