Zerlinda's Blog

css盒模型margin折叠问题总结

外边距叠加是一个相当简单的概念。 但是,在实践中对网页进行布局时, 它会造成许多混淆。 简单的说, 当两个或更多个垂直边距相遇时, 它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。先看一个例子:

<html>
 <head></head>
 <body>
  <div id="header"> 
   <div class="header_cap">
    <h1>test</h1>
   </div> 
  </div>
 </body>
</html>

#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中, 如果对元素不做其他特殊处理,那么父元素header和子元素header_cap的margin-top就会折叠,真正的外边距是显示在父元素header外的。这就是所说的边距折叠问题了。

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

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

在以下情况margin不会被折叠:

  1. 相邻的盒模型中,如果其中的一个设置了float属性,则其margin不会被折叠,一个浮动的盒模型和它的子元素之间也是这样。
  2. 设置了overflow属性的元素和它的子元素之间的margin不会被折叠(overflow取值为visible除外)。
  3. 设置了绝对定位的盒模型的margin不会被折叠,和他们的子元素之间也是一样。
  4. 设置了display:inline-block的元素的margin不会被折叠,和他们的子元素之间也是一样。
  5. 一个应用了清除浮动操作的元素的margin-top绝不会和它的块级父元素的margin-bottom折叠。

注意:

  1. 如果元素的margin和它的父元素的margin-top折叠在一起,盒模型border-top的边界定义和它的父元素相同。
  2. 任意元素的父元素不参与margin的折叠,或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零,那么元素的border-top边界位置和原来一样。
  3. 那些已经被折叠覆盖的元素的位置对其他已经被折叠的元素的位置没有任何影响;只有在对这些元素的子元素定位时,border-top边界位置才是必需的。
  4. 根元素的垂直margin不会被折叠。

解决方案:

  1. 在父层div加上:overflow: hidden;
  2. 将margin外边距改成padding内边距;
  3. 为父元素设置不为零的padding或border

发表评论

电子邮件地址不会被公开。 必填项已用*标注