简介

        本文介绍如何解决margin合并的问题。包括父子元素的合并和兄弟元素的合并。

margin合并(塌陷)的场景

        当2个垂直外边距相遇时，他们将合并为一个外边距。合并之后的外边距的高度等于2个发生合并的外边距的高度中的较大值。 

下述场景会导致margin合并：


  2. 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上/下外边距会发生合并。
  3. 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
  4. 当一个空元素没有边框或填充时，上下外边距碰到了一起，也会发生合并。

实例1：父子元素外边距合并

        但在Chrome和FireFox会出现这种情况，在IE6 IE7中均显示正常，这恰恰说明了IE是不符合规范的，而Chrome和FireFox则是严格遵守规范的。

需求：子元素相对于父元素向下偏移50px。

问题复现

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        body {
            margin: 0;
        }

        .outer {
            width: 400px;
            height: 300px;
            background-color: yellow;;
        }

        .inner {
            width: 200px;
            height: 200px;
            margin-top: 50px;
            background-color: pink;
        }
    </style>
</head>

<body>

<div class="outer">
    <div class="inner"> </div>
</div>

<script>

</script>
</body>
</html>

结果 

CSS--解决margin塌陷(margin-top失效)--实例_html

可以看到，子元素和父元素同时向下偏移了50px。而我们想要的是只子元素向下偏移。

解决方案 


  2. 设置父元素：overflow:hidden;（推荐）
  3. 设置父元素：float: left;
  4. 设置父元素：border:1px solid;    (大于0且style不为none)
  5. 设置父元素：padding:1px;   (大于0)
  6. 设置父元素：填充一定的内容。 
  7. 设置父元素或者自身：display:inline-block;
  8. 设置父元素或者自身：position:absolute;

上边任意一种解决方案，都能产生如下正确的结果：

CSS--解决margin塌陷(margin-top失效)--实例_css_02

实例2：兄弟元素外边距合并

需求：上边的元素下边界距离下边的元素的上边界300px

问题复现

上边的元素下外边距设置为200px，下边的元素的上外边界100px。

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        body {
            margin: 0;
        }

        .upper {
            width: 400px;
            height: 300px;
            margin-bottom: 200px;
            background-color: yellow;;
        }

        .lower {
            width: 200px;
            height: 200px;
            margin-top: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>

<div class="upper"></div>
<div class="lower"></div>

</body>
</html>

结果

CSS--解决margin塌陷(margin-top失效)--实例_解决方案_03

距离只有200px。（肉眼就可以看出，两个的距离和下边粉色方框的高度（200px）差不多。）

解决方案

  1. 下边的元素：增加float属性。例如：float: left

结果

CSS--解决margin塌陷(margin-top失效)--实例_前端_04