我们在学习前端的时候，一定会遇到这样的问题：

先简单通俗地介绍一下这两个属性： padding可以理解为内容与边框的距离； margin 可以理解为边框与其他元素的距离。

下面是代码的渲染结果： 一个简简单单的200x200px的盒子！背景颜色完全填充进去，找不出一点问题！ 但是当我们为这个盒子添加了padding属性时，结果会不会有什么变化呢？

渲染结果如下： 看到上图的结果，我们可以很容易的发现盒子的大小以及改变为了300x200px，宽度的增大就是受到了padding-left的影响，也证实了我们一开始说的padding属性可以撑大盒子，并且这里的背景颜色也是顺利的填充了整个盒子！

下面我们来看一下magin对盒子产生的影响：

我们把原本的padding-left改为了margin-left，看看渲染结果会不会有什么不同： 没错，盒子总是善变的！盒子的宽度和高度依旧保持着200x200px，但是由于我们设置了margin-left值，所以会与父元素(浏览器)有着100px的间隔，所以也可以理解为撑大了盒子，不过此时的背景颜色并不会渲染到外边距，这是为什么呢？ 我们可以看一看background-color的定义： 原来背景颜色并不填充外边距，这也是为什么加了margin之后，背景颜色的大小还是那么大！