一、盒子模型

说在前面的话：

    1、内边距出现在内容区域的周围，如果给元素添加背景，那么背景会应用于由内边距和元素内容组成的区域。

    2、在css中，width和height值得是元素内容区域的宽度和高度。（通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素）。

IE盒子模型

标准盒子模型

二、外边距叠加

说在前面的话：

    1、只有普通文档流中的外边距会发生叠加，行内元素、浮动框和据绝对定位元素之间不会发生外边距叠加。创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠。

    2、简单说来，当两个或者更多的垂直外边距相遇时，它们会形成一个外边距，这个外边距的高度为发生叠加的外边距中高度最大者。

外边距叠加的几种实例：

    1、当一个元素在另一个元素上面时：

当一个元素在另一个元素上面时

    2、当一个元素包裹在另一个元素内部时：

子元素与父元素的外边距发生叠加

3、空元素自身的外边距叠加：

空元素自身的外边距叠加