我们在学习前端的时候，一定会遇到这样的问题：
当我们给盒子设置了宽度、高度以及背景颜色时，这个时候在给它添加
padding
和
margin
的属性值，会有什么不一样吗？
padding
margin
先简单通俗地介绍一下这两个属性：
padding
可以理解为内容与边框的距离；
margin
可以理解为边框与其他元素的距离。
最重要的是：这两者都会撑大我们的盒子！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width: 200px;height: 200px;background-color: aqua;"></div>
</body>
</html>
下面是代码的渲染结果：
一个简简单单的200x200px的盒子！背景颜色完全填充进去，找不出一点问题！
但是当我们为这个盒子添加了
padding
属性时，结果会不会有什么变化呢？
div {
width: 200px;
height: 200px;
background-color: aqua;
padding-left: 100px;
}
渲染结果如下：
看到上图的结果，我们可以很容易的发现盒子的大小以及改变为了300x200px，宽度的增大就是受到了
padding-left
的影响，也证实了我们一开始说的
padding
属性可以撑大盒子，
并且这里的背景颜色也是顺利的填充了整个盒子！
下面我们来看一下
magin
对盒子产生的影响：
div {
width: 200px;
height: 200px;
background-color: aqua;
margin-left: 100px;
}
我们把原本的
padding-left
改为了
margin-left
，看看渲染结果会不会有什么不同：
没错，盒子总是善变的！盒子的宽度和高度依旧保持着200x200px，但是由于我们设置了
margin-left
值，所以会与父元素(浏览器)有着100px的间隔，所以也可以理解为撑大了盒子，不过此时的背景颜色并不会渲染到外边距，这是为什么呢？
我们可以看一看background-color的定义：
原来背景颜色并不填充外边距，这也是为什么加了
margin
之后，背景颜色的大小还是那么大！