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

站长手记作者： 2024-08-28 11:45:01

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

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

.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;}

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

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

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_70103.html

相关资讯：相邻元素 margin合并