CSS中margin-top塌陷问题的解决方案

本文主要针对margin属性的两个坑和解决方法进行分享,相信通过本文的介绍你对margin属性一定会有深刻的认识。

margin属性

• 外边距是元素边框与周围元素相距的空间。使用margin属性可以设置外边距。

• 设置方法和 padding 类似，同样也提供了四个方向的 margin-top/margin-right/margin-
  bottom/margin-left 。

• margin: xxx auto; 可以使块状元素水平居中。

• 嵌套崩塌(坑1) ：两个盒子发生嵌套的时候，给子类设置 margin 会给父类造成一种崩塌现象，子类元素
  的 margin-top 没有效果，而是直接作用到父类元素。
  

• margin重叠 (坑2)： 如果垂直方向上两个块状元素同时设置了 margin-bottom 和 margin-top，那么这
  两个值将会发生重叠，不会累加，哪个值大用哪个。
  

• margin-top/margin-bottom 对于行内元素无效。