相邻元素之间的margin合并问题

任何元素都可以设置border 设置宽高可能无效
行内元素设置padding，margin上下是无效的，左右是有效的

外边距合并：指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        * {
          margin:0;
          padding:0;
          border:0;
        }

        #d1 {
          width:100px;
          height:100px;
          margin-top:20px;
          margin-bottom:20px;
          background-color:red;
        }

        #d2 {
          width:100px;
          height:100px;
          margin-top:10px;
          background-color:blue;
        }

    </style>
</head>

<body>

<div id="d1">
</div>

<div id="d2">
</div>

<p>请注意，两个 div 之间的外边距是 20px，而不是 30px（20px + 10px）。</p>
</body>
</html>

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

<!DOCTYPE html>
<html  lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        * {
          margin:0;
          padding:0;
          border:0;
        }

        #outer {
          width:300px;
          height:300px;
          background-color:red;
          margin-top:20px;
        }

        #inner {
          width:50px;
          height:50px;
          background-color:blue;
          margin-top:10px;
        }

    </style>
</head>
<body>
<div id="outer">
  <div id="inner">
  </div>
</div>
<p>注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）。</p>
</body>
</html>

尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

解决垂直外边距合并问题

两个相邻元素之间的间隔，只有20px；如果我要实现两元素间的间隔是我理想的间隔，即30px,该如果实现呢？方法有以下两个：

给最后面的元素加上浮动（left/right）

给最后一个元素加上display:inline-block;但是IE6和IE7下不完全支持display:inline-block，所以要加上*display:inline;zoom:1即可解决IE6、7的bug;

.box_a{width:50px; height:50px; background:#f00; margin:10px 0;}
.box_b{width:50px; height:50px; background:#f0f; margin:20px 0;display:inline-block;*display:inline; zoom:1;}

当子元素都浮动或者display：inline-block时，外边距不再合并



    <!DOCTYPE html>
<html  lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .box_a{
                width:50px;
                background:#f00; 
                display: inline-block;
        }
        .box_b{
                width:50px; 
                background:#f0f; 
                margin:50px;display: 
                inline-block;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="box_a">

        </div>    
        <div class="box_b">

        </div>
    </div>
</div>
</body>
</html>

让a和b不在同一个bfc内

.box{
            border:1px solid red;
            width: 400px;
        }
        .a{

            width: 400px;
            height: 100px;
            background: olivedrab;
            margin-bottom: 100px;
        }
        .b{
            background: #777;
            height: 100px;
            overflow: hidden;
            margin-top: 100px;
        }
        .b-box{
            overflow: hidden;
        }
<div class="box">
    <div class="a">我是a</div>
    <div class="b-box">
        <div class="b">我是b</div>
    </div>
</div>

链接: https://fly63.com/article/detial/483

相邻元素之间的margin合并问题

css盒子_用Margin还是用Padding？

margin和padding的区别和用法

CSS margin的一些让你模糊的点

css设置margin-top失效及解决办法

子元素margin-top导致父元素移动的问题