什么是盒模型？

盒模型的概念通俗点来说，就是一个盒子，里面包含着通过CSS属性在HTML文档中所展现出来的内容和样式。它是用来控制元素和元素之间的位置关系。一个div就是一个盒子
它的组成部分就是内容区（content）+填充区（padding）+边框（border）+外边距（margin）

先看一段代码：

通过代码可以看出来box是box1的父元素，我给父元素box的宽高各200px，给子元素box1的宽高各100px。
当我给子元素和父元素添加margin和padding值之后：

通过上图可以看出子元素box1的位置关系发生了变动，在这里，我给子元素box1添加了margin-left：40px；也就是box1左边的外边距距离父元素有40px的间距；然后我同样给父元素box添加了padding-top：40px；子元素box1的上方距离父元素box也有40px的间距。然后还给子元素box1添加了一个宽度为2px的黑色边框。
但是我们能看出来这个图的大小明显和上边图的大小不一样了，这是为什么呢？因为我们给父元素box已经设定好了宽高，当我们给父元素设置padding值的时候，父元素的宽高就会发生变化，所以要注意一点：当给父元素添加了padding值之后，如果想让父元素的宽高保持原有的大小，就要在父元素原有的宽高上减去padding值；如果没有给父元素设置宽高，padding值直接撑开的，就不用减去。
在上面这个图中，可以明白盒模型的组成布局，content内容区里边放的就是我们要让他在网页上显示出来的内容，也就是box1，而padding，是控制子元素在父元素里的位置关系；margin就是控制元素和元素之间的的位置关系。

怎么区分padding和margin？padding是在盒子的内部，边框（border）与内容区（content）之间的距离，margin是在盒子的外部，盒子与盒子之间的距离，也就是边框（border）与边框（border）之间的距离；如图：