CSS外边距叠加详解

青春..荒唐

浏览: 973141 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS

【外边距合并】

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

接下来举几个简单例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>垂直外边距叠加</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .top{
            background:#666;
            margin-bottom:10px;
            width:100px;
            height:100px;
        }
        .bottom{
            background:#CCC;
            margin-top:20px;
            width:100px;
            height:100px;
        }
        .outbox{
            background:#666;
            margin:10px;
            width:140px;
        }
        .inbox{
            background:#CCC;
            margin:20px;
            width:100px;
            height:100px;
        }
        .box{
            background:#CCC;
            margin:20px;
        }
        .testbox{
            background:#CCC;
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>
<div class="top"></div>
<div class="bottom">上下垂直外边距叠加为较大的那个 就是20</div>
<div class="outbox">
    <div class="inbox">里外垂直外边距叠加为较大的那个 也是20</div>
</div>
<div class="box"></div>
<div class="testbox">没有内容，没有边框，没有内边距，自身的上下外边距一样可以叠加</div>
</body>
</html>

【注意：】只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。实际操作发现，相对定位垂直外边距会叠加，但是任何情况下，水平外边距是不会叠加的。

【官方解释】

块的顶部外边距和底部外边距有时被组合（折叠）为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷（也叫外边距合并）。

发生外边距塌陷的三种情况：

（1）相邻的兄弟姐妹元素（除非后者兄弟姐妹需要清除过去的浮动）

（2）块级父元素与其第一个/最后一个子元素

（3）空块元素

下面，我们通过几个实例对这三种情况进行解释

一、相邻的兄弟姐妹元素

毗邻的两个兄弟元素之间的外边距会塌陷（除非后者兄弟姐妹需要清除过去的浮动）

这句话有两个要点：

1、一般情况：毗邻的两个兄弟元素之间的外边距会塌陷；

2、特殊情况：当后面div需要清除过去的浮动时，毗邻的两个兄弟元素之间的外边距不会塌陷

二、块级父元素与其第一个/最后一个子元素

（1）上边距合并：

如果块级父元素与第一个子元素之间不存在上边框、上内补、inline content、清除浮动这四条属性之一（对于上边框和上内补，也可以说，当上边距及上内补宽度为0时），那么这个块级元素和其第一个子元素的上边距就可以说“挨到了一起”。此时这个块级父元素和其第一个子元素就会发生上外边距合并的现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者，而父元素与该子元素之间边距消失

（2）下边距合并：

类似的，若块级元素的margin-bottom与它的最后一个子元素的margin-bottom之间没有border、padding、inline content、height、min-height、max-height分隔时，就会发生下边距合并的现象

我们先看一个例子：

// css
.parent{
  width:400px;
  height:300px;
  background:#ddd;
}
.child1{
  width:300px;
  height:100px;
  background:pink;
}
.child2{
  width:200px;
  height:100px;
  background:gray;
}
// html
<body>
  <div class='parent'>
    <div class='child1'></div>
    <div class='child2'></div>
  </div>  
</body>

结果：

现在我们想让粉色div和父div之前有40px的空隙，所以给粉色div设置"margin-top:40px"：

预期结果：

实际结果：

这就是父子元素之间的margin合并。由于粉色div与父div之间没有上边框、上内补、inline content、清除浮动这四条属性之一，使得两个div之间产生了margin合并的现象。

同样地，父元素与最后一个子元素之间也可能发生margin合并的情况，情况大致相同，不再举例说明

三、空块元素

如果存在一个空的块级元素，其border、padding、inline content、height、min-height都不存在，那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并

【总结】

①为什么会发生margin合并？

这些元素（包括兄弟、父子元素等）之间之所以会发生margin合并，是因为它们属于同一个BFC。关于BFC （Block Formatting Context块级格式化上下文），我会在后面文章总结

分享到：

zoom和scale的区别 | 浮动覆盖与文字围绕浮动解析

2018-02-03 17:06
浏览 884
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论