margin与padding区别

盒子模型都知道，但是具体margin和padding都是可以撑开（表面上）与父亲节点或者兄弟节点的距离，用来页面布局。没什么区别，但是有时候就是会遇到一些奇奇怪怪的样式布局bug，导致改样式，实在觉得有点晕头转向，感觉总是搞不清楚。归根结底还是这两者在用法上的区别没有搞很明白，这两者常见的bug场景总结如下：

margin

1. margin : 0 auto;

   只对块级元素起作用。（

   diaplay:block;

   行内和行内块都不起作用）
2. margin在块级元素下，上下左右可随意设定，且块级元素的margin的参照基准是前一个元素即相对于自身之前的。（元素有margin距离，如果元素是第一个元素，则相当于父元素的margin距离）
3. 上下两个盒子，上面盒子有margin-bottom:10px;下面盒子有margin-top:20px;两个盒子之间的距离并不是上下两个盒子的margin值相加，而是取两者最大值。
4. 浏览器在默认状态下会对margin设置初值，所以在没有对div设置margin的情况下，div会出现一定的距离。
5. margin-top经常会出现bug，尤其在IE浏览器下。在一个页面的第一个元素设置margin（父子元素之间），经常会错乱。。。使用padding属性就可以避免此问题。所以建议只在兄弟元素之间使用margin，在父子元素之间使用padding。

padding

1. padding 设置负值不起作用。
2. 行内元素（display:inline;）设置padding-top;padding-bottom;无效。设置padding-left;padding-right;起作用。
3. 两个盒子套在一块，里面的盒子写padding-top:50px;时，两个盒子之间不会产生距离，而是给中间和盒子加高了50像素，这是就需要给外层的盒子（或者里面的盒子）加上

   box-sizing:border-box;

以后遇见了其他问题会继续更新~~~