内边距（padding），指的是盒子的内容区与盒子边框之间的距离，一共有四个方向：padding-top

padding-right

padding-bottom

padding-left

内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距

盒子的大小由内容区、内边距和边框共同决定

盒子可见框的宽度= border-left-width + padding-left + width + padding-right + border-right-width

盒子可见框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-widt

使用padding可以同时设置四个边框的样式，规则和border-width一致

---

外边距：
外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置

盒子有四个方向的外边距：

margin-top

margin-right

margin-bottom

margin-left

由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置

外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动

如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中，

如果单独一方设置的话，图片会靠最右边或者最左边

外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,规则和padding一样

用法：（四个值时，顺时针顺序；三个值时，上、左右、下；两个值时，上下、左右）

margin: 10px 20px 30px 40px;

---

外边距的重叠：

            垂直外边距的重叠

                       在网页中相邻的垂直方向的外边距会发生外边距的重叠

                       所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和，然后覆盖

                     如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

           兄弟外边距重叠：

                                    调整位置

                父子外边距重叠：

                                方法一：在父子div中间加数字、字母或者文字

                                方法二：在父亲的type中设置边框border-top:1px red solid;

                                  方法三：给父亲设置内边距padding-top:1px;

                                  方法四：给父亲设置overflow:hidden;

                                方法五：                   

                                                子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边                                                   距会传递给父元素使用空的table标签可以隔离父子元的                                                               外边距，阻止外边距的重叠

经过修改后的clearfix是一个多功能的样式，既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠

代码：

解决父子元素的外边距重叠

.box1:before{

content: "";

display:table可以将一个元素设置为表格显示

display: table;

}

解决父元素高度塌陷

.clearfix:after{

content: "";

display: block;

clear: both;

}