margin 合并问题

来源：互联网发布：如何学好高中生物知乎编辑：程序博客网时间：2024/05/16 13:43

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title></title>  <style type="text/css">    #container {      width: 1000px;      margin: 50px auto;    }    /*margin合并问题*/    #demo4 .shape {      width: 200px;      height: 100px;      background-color: #F25A5A;    }    #demo4 .one {      margin-bottom: 100px;    }    #demo4 .two {      margin-top: 80px;    }    #demo4 .three,    #demo4 .four {      display: inline-block;    }    #demo4 .three {      margin-right: 100px;    }    #demo4 .four {      margin-left: 100px;    }    #demo4 .five {      margin-right: 100px;    }    #demo4 .six {      margin-left: 100px;    }  </style></head><body>  <div id="container">    <div id="demo4" class="demoC">      <h1>margin合并问题</h1>      <div>        <div class="shape one">one</div>        <div class="shape two">two</div>      </div>      <div>        <div class="shape three">three</div>        <div class="shape four">four</div>      </div>      <div>        <span class="five">five</span>        <span class="six">six</span>      </div>    </div>  </div>  <script type="text/javascript">  </script></body></html></html>

块级元素垂直合并
块级行内元素水平方向不会合并
行内元素水平方向不会合并

如下图
效果图

0 0