css盒模型margin折叠问题解决方案总结

先看一个例子:

<div id = "header">
    <div class = "header_cap"><h1>test</h1></div>    
</div>
#header {
    width: 100%;
    height: 6rem;
    text-align: center;
    background-color: #CCC;
    overflow: hidden;
}
#header .header_cap {
    heigth: 2rem;
    margin-top: 2rem;
    text-indent: -0.7rem;   

}
#header .header_cap h1 {
    font-size: 2rem;
}

在这个demo中, 如果不加overflow:hidden;那么父元素header和子元素header_cap的margin-top就会折叠,真正的外边距是显示在父元素header外的,而子元素上边界和父元素上边界依旧重叠,这样显示不出我们所要的效果。这就是所说的边距折叠问题了。对于margin折叠问题,有以下常遇到的问题与解决方法。


在常规文档流中,2个或以上的块级盒模型相邻的垂直margin会被折叠。最终的margin值计算方法如下:

  1. 全部都为正值,取最大者;
  2. 不全是正值,则都取绝对值,然后用正值减去最大值;
  3. 没有正值,则都取绝对值,然后用0减去最大值。

注意:

  1. 相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。相邻的盒模型中,如果其中的一个是浮动的(floated),垂直margin不会被折叠,甚至一个浮动的盒模型和它的子元素之间也是这样。
  2. 设置了overflow属性的元素和它的子元素之间的margin不会被折叠(overflow取值为visible除外)。
  3. 设置了绝对定位(position:absolute)的盒模型,垂直margin不会被折叠,甚至和他们的子元素之间也是一样。
  4. 设置了display:inline-block的元素,垂直margin不会被折叠,甚至和他们的子元素之间也是一样。
  5. 一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom折叠。

注意:

  • 如果一个盒模型的上下margin相邻,这时它的margin可能折叠覆盖(collapse through)它。在这种情况下,元素的位置(position)取决于它的相邻元素的margin是否被折叠。
  • 如果元素的margin和它的父元素的margin-top折叠在一起,盒模型border-top的边界定义和它的父元素相同。
  • 另外,任意元素的父元素不参与margin的折叠,或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零,那么元素的border-top边界位置和原来一样。
  • 那些已经被折叠覆盖的元素的位置对其他已经被折叠的元素的位置没有任何影响;只有在对这些元素的子元素定位时,border-top边界位置才是必需的。
  • 根元素的垂直margin不会被折叠。

解决方案:

  1. 在父层div加上:overflow: hidden;
  2. 把margin-top外边距改成padding-top内边距;
  3. 父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border
    父层div加: padding-top: 1px;
  4. 让父元素生成一个 block formating context,以下属性可以实现
  float: left/right
  position: absolute
  display: inline-block/table-cell(或其他 table 类型)
  overflow: hidden/auto
  1. 父层div加:position: absolute;
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值