HTML
内边距
内边距，指的是盒子的内容区与盒子边框之间的距离，一共有4个方向的内边距。
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距。
盒子的大小由内容区，内边距和边框共同决定
.box1 {
width: 200px;
height: 200px;
background-color: #bbffaa;
border: 10px red solid;
/* 内边距 */
padding-top: 100px;
padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;
}
外边距
外边距指的是当前盒子与其他盒子之间的距离，它不会影响可见框的大小，而是会影响到盒子的位置。
由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置。
margin-left: -100px;
如果外边距设置的是负值，则元素会向反方向移动。
margin-left: auto;
margin还可以设置为auto，auto一般只设置给水平方向的margin，如果只指定，左外边距或右外边距的margin为auto，则会将外边距设置为最大值。
margin-top: auto;
垂直方向外边距如果设置为auto，则外边距默认就是0
margin-left: auto;
margin-right: auto;
如果将left和right同时设置为auto，则元素将会在父元素中水平居中。
垂直外边距的重叠
在网页中相邻的垂直方向的外边距会发生外边距的重叠，所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和。
如果是一个div套一个div的话，里面的div设置外边距会失效。此时给外面的div设置边框(border)或者padding-top都可以解决这个问题。
浏览器默认样式
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下，我们是不需要使用的，所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。
清除浏览器的默认样式
* {
margin: 0px;
padding: 0px;
}
