什么时候用margin好，什么时候用padding好？

这里是修真院前端小课堂，本篇分析的主题是

【什么时候用margin好，什么时候用padding好？】

每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【什么时候用margin好，什么时候用padding好？】

 

 

1.背景介绍

• 标准盒模型

 

• ie盒模型

 

 

2.知识剖析

 

今天的小课堂，只需要了解标准盒模型，盒模型由内至外分别是content、padding、border、margin，其中可以使用百分比的有content

,padding,margin，边框border则不可以用%单位

 

 

元素水平分为3种：block水平，inline-block水平，inline水平，3种元素各有不同的表现。

block水平默认情况下，水平竖直方向上的padding,margin有效。

inline元素水平排列，竖直方向上的padding,margin无效。

inline-block水平元素，水平竖直方向上的padding,margin有效。

 

 

简单讲讲margin与padding的语法，即一个值，两个值，三个值这些大家都应该明白了（DEMO1）

今天主要讲讲别的东西，margin与padding的区别(个人理解)

区别一：pdding能增加元素的容器的可视区域，margin则会减少默认块级元素的可视区域(demo2)

区别二：margin有负值，padding不能使用负值。（demo1验证）

 

margin与padding的%值，真的是继承父级width吗？

请看demo3

结论，未使用绝对定位（固定定位）的元素内外边距的%值都是继承父级盒子，如果是绝对定位(固定定位)则是根据其继承关系的定位元素，没有就是根据html元素为基准

关于margin负值，padding不能负值

Dome1演示

<h4>margin外边距重叠</h4>

<p>margin外边距重叠的种类</p>

<p>margin外边距重叠的前提1、正常的块级元素，（非浮动和绝对定位元素)</p>

<p>margin外边距重叠的前提2、(writing-model为正常流)</p>

<p>如何消除margin外边距重叠</p>

（demo4）

 

<h4>消除margin重叠的规则</h4>

<p>父级与子级消除margin重叠</p>

<p>父级BFC化</p>

<p>父级有padding</p>

<p>父级有border</p>

<p>父级与子级之间没有inline水平元素</p>

<p>父级与最后一个子级之间发生margin-bottom重叠，父级没有设置height，max-height，min-height的限制</p>

<h4>空块级元素的消除重叠</h4>

<p>该元素没有border</p>

<p>该元素没有padding</p>

<p>该元素没有height，min-height的限制</p>

<p>该元素没有inline元素</p>

<h4>margin:auto(DEMO5)</h4>

<h4>margin:auto的表现</h4>

<h4>margin：负值的应用（demo6）</h4>

 

 

3.常见问题

margin：auto为什么竖直方向不垂直居中

 

 

是真的不起作用？还是height的关系（DEMO7）

 

4.解决方案

DEOM

5.编码实战

DEMO

6.扩展思考

 

<p>inline水平元素竖直方向上的padding的真的不生效？</p>

 

<p>%值真的是继承父级的width</p> demo8

 

 

7.参考文献

 

参考一：张鑫旭慕课网margin,padding深入理解视频

8.更多讨论

<p>讨论点1：margin与padding何时使用呢？</p>

<p>讨论点2：margin与padding配合使用的效果在哪里？(等高布局)</p>

 

三个问题：

 

1、margin与padding的%值，真的是继承父级width吗？

 

结论，未使用绝对定位（固定定位）的元素内外边距的%值都是继承父级盒子，如果是绝对定位(固定定位)则是根据其继承关系的定位元素，没有就是根据html元素为基准

关于margin负值，padding不能负值

 

2、

 

如果是inline水平和inline-block水平的元素，margin无论是正值还是负值都不会影响盒子的尺寸，只会改变盒子的位置，如果是margin-left负值，盒子会向左侧移动，如果是margin-top负值则会向上移动，如果是margin-right和margin-bottom则会影响右侧和下面的盒子，右侧会左移，下面的盒子会浮上来。

如果是块级元素设置了width，那么它的表现和上面所述一样。

如果没有设置width，left和right方向设置负值，那么就会在该方向上扩充容器水平方向尺寸。

3、

margin 负值的left和right的表现说有区别也有区别，说有区别，就是两个inline-block元素，第一个设置margin-left的负值，发现这两个元素都左移。这是区别。

说没有区别是对第二个元素的影响

此时设置红色盒子的margin-right:-20px;和绿色margin-left:-20px；变现是一样的，所以这里对绿色盒子来说margin-left和margin-right负值没有区别。

结论：盒子本身的margin-left负值影响自身，margin-right的负值影响下一个盒子，这是区别。

如果是对绿色盒子，红色盒子的margin-right和自身margin-left来说就没有区别。