bug:margin合并

最新推荐文章于 2021-08-11 15:53:02 发布

weixin_30852367

最新推荐文章于 2021-08-11 15:53:02 发布

阅读量70

点赞数

原文链接：http://www.cnblogs.com/liubeimeng/p/10642089.html

版权

demo1和demo2存在margin合并问题：
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
弥补方案：bfc;

添加一个父级盒子做bfc：

.wrapper{
overflow: hidden;
}

demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin合并</title>
    <style>
    *{margin: 0;padding: 0;}
    .box1{
        background-color: red;
        margin-right: 100px;
    }
    .box2{
        background-color: green;
        margin-left: 100px;

    }
    .demo1{
        background-color: red;
        margin-bottom: 100px;
    }
    .demo2{
        background-color: green;
        margin-top: 100px;
    }
    .wrapper{
        overflow: hidden;
    }
    </style>
</head>
<body>
    <!-- box1和box2是正常的margin相加 -->
    <span class="box1">123</span>
    <span class="box2">234</span>

    
    <!-- 添加一个父级盒子做bfc -->
    <div class="wrapper">
        <div class="demo1">1</div>
    </div>
    <!-- 添加一个父级盒子做bfc -->
    <div class="wrapper">
        <div class="demo2">2</div>
    </div>

    
    
    <script>
        /**
         *
         * demo1和demo2存在margin合并问题：
        外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
        合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
        解决方案：bfc;
         */
    </script>
</body>
</html>