margin 与 padding

[TOC]

一、margin

1.1 margin竖直方向重叠问题

1.1.1 兄弟之间重叠

• 解决方案

  1. 尽量使用同一方向的margin值，比如都设为top或bottom。
  2. 给其中一个兄弟元素包裹一层容器，并触发该容器生成一个BFC，这样兄弟元素就不属于同一个BFC了。

  .wrap{
      overflow: hidden;
  }
  

1.1.2 父子之间重叠

margin-top传递：子元素传给父元素

• 解决方案

  1. 给父元素加border。

     

  2. 给父元素加overflow: hidden，触发BFC。

  3. 给父元素加padding，而不是给儿子加margin。

1.2 margin失效

使用clear:both时，margin会失效。

二、padding

三、margin && padding

3.1 适用场景

• margin
  • 需要在border外侧添加空白
  • 空白处不需要背景色
  • 上下相连的两个盒子之间的空白，需要相互抵消时
• padding
  • 需要在border内侧添加空白，可以撑大容器的大小。
  • 空白处需要背景颜色
  • 上下相连的两个盒子的空白，希望为两者之和

margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。

所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。