margin 合并问题

最新推荐文章于 2025-07-08 14:15:23 发布

来小新

最新推荐文章于 2025-07-08 14:15:23 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： margin合并

本文链接：https://blog.youkuaiyun.com/liqianglai/article/details/47612165

CSS 专栏收录该内容

3 篇文章

订阅专栏

<!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>