这里是修真学院的前端小教室。每篇文章分享自【背景介绍】【知识分析】【常见问题】【解决方案】【编码实践】【扩展思考】【更多讨论】【参考文献】八篇深入剖析前端这方面的知识/技能，本文分享的是：【什么时候用margin比较好，什么时候用padding比较好？】1.背景介绍标准盒模型即盒模型2.知识解析在今天的小课中，大家只需要了解标准盒模型即可。,padding,margin,border不能使用%单位元素层级分为块层级、inline-block层级、inline层级三种。三种元素有不同的表现。块级默认情况下，水平和垂直方向的padding和margin是有效的。内联元素水平排列，垂直方向的padding和margin无效。inline-block水平元素，水平和垂直方向的padding和margin有效。简单说一下margin和padding的语法，即一值、二值、三值。大家应该明白了（DEMO1）今天主要说说其他的，margin和padding的区别（个人理解）区别一：pddding可以增加元素容器的可见区域，margin会减少可见默认块级元素的区域（demo2）。区别二：margin有负值，padding不能用负值。（demo1验证）margin和padding的%值是否真的继承了parent的宽度？请看demo3的结论。不使用绝对定位（固定定位）的元素的内外边距的%值继承父框。如果是绝对定位（固定定位），就是根据其继承关系的元素定位。如果不是，则基于html元素，基于margin的负值，padding不能为负。Dome1演示
marginOverlap
MarginOverlap的类型
OverlappingMargin的前提条件1.普通的块级元素，（非浮动和绝对定位的元素）
重叠边距的前提2、（writing-model为正常流程）
如何消除重叠边距
（demo4）消除边距重叠的规则
p>消除parent和child之间的marginoverlapparent的BFC
Parent有padding
Parent有border
有parent和child之间没有inlinehorizo??ntal元素
margin-bottom在parent和最后一个child之间发生Overlap，parent没有设置height,max-height,min-height限制
清空块级元素以消除重叠
该元素没有边框
该元素没有填充
该元素没有高度和最小值-高度限制
元素没有内联元素
margin:auto(DEMO5)
margin:performancauto的e
margin：负值的应用（demo6）
3.常见问题margin：为什么auto的垂直方向不是垂直居中真的不行吗？或者高度的关系（DEMO7）4.解DEOM5。编码练习DEMO6。延伸思考内联水平元素垂直方向的padding真的不生效？
%值真正继承了parent的宽度
demo87.参考文献参考1：张新旭MOOC网边距，padding深入理解视频8.更多讨论讨论点1:margin和padding什么时候用？
讨论点2：margin和padding一起使用有什么效果？（轮廓布局）
三个问题：1.margin和padding的%值真的继承父级的宽度吗？总之，不使用绝对定位（固定定位）的元素的内外边距的%值继承父框。如果是绝对定位（固定定位），就是根据其继承关系的元素定位。如果不是，则基于html元素。关于margin的负值，padding不能为负。2、如果是inline级别和inline-block级别的元素，不管margin是正还是负，都不会影响框的大小，只会改变框的位置。如果是margin-如果left的值为负数，则框会向左移动。如果它是margin-top的负值，它会向上移动。如果是margin-right和margin-bottom，会影响右边和下面的框。右边会向左移动，下面的盒子会飘起来。如果它是一个设置了宽度的块级元素，那么它的行为如上所述。如果不设置width，并且为左右方向设置了负值，那么容器的水平尺寸会往那个方向扩展。3.负margin值的left和right的表现不同或不同。如果有区别，那就是两个行内块元素。第一个设置了margin-left的负值，发现两个元素都向左移动了。这就是区别。说没有区别，就是对二次元的影响。此时设置红框的margin-right:-20px；和绿色margin-left:-20px;实现是一样的，所以这里绿色框的margin-left和margin-right的负值没有区别。结论：盒子本身的margin-left负值影响自己，margin-right负值影响下一个盒子。这就是区别。如果是针对绿框，红框的margin-right和自己的margin-left没有区别。》我们相信人人都可以成为工程师，现在就开始，找个师兄指导你入门，学习的路上不再迷茫，这里是技能树。IT修真学院：http:///www.jnshu.com，适合初学者切换到互联网行业的聚集地。”欢迎加入IT交流群565734203与大家一起探讨交流