Margin塌陷

先来说下什么是margin塌陷,就是在文档流中,竖直方向的margin会出现合并(叠加),值较大的会覆盖住值较小的,

昨天晚上和群里小伙伴,讨论了一个问题:

下图代码连接

就是上图,为什么会这样.小伙伴给出的解决方法是在div里面加上margin,这样是解决了.但在写代码的时候不会直接先写个overflow:hidden吧,造成这样的原因是为什么?

这里就涉及到margin塌陷的问题,

但有的小伙伴会说没有margin哪里来的margin塌陷,别忘了你写了margin:0,这样通了,因为margin合并导致所有子元素的margin与margin:0合并了,注意这种现象只在竖直方向出现

那解决方法有哪些哪?

这里我用个例子来说明:

<body>
    <div class="parent">
        <div class="child1">
            <div class="child2">

            </div>
        </div>
    </div>

</body>

css

 * {
            margin: 0 auto;
            padding: 0 auto;
            box-sizing: border-box;
        }
        div {
          margin: 25px;
            border-radius: 50%;
        }

        .parent {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .child1 {
            width: 150px;
            height: 150px;
            background-color: gray;
        }

        .child2 {
            width: 100px;
            height: 100px;
            background-color: #fff;
        }

按照上面的代码出来的页面是这样的:

和上面那个问题一样,都是由于margin塌陷,解决方法:

加border

 * {
            margin: 0 auto;
            padding: 0 auto;
            box-sizing: border-box;
        }

        div {
            margin: 25px;
            border-radius: 50%;
            /border: 1px solid red; 
        }

        .parent {
            /* border: 25px solid red; */
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .child1 {
            /* border: 25px solid gray; */
            width: 150px;
            height: 150px;
            background-color: gray;
        }

        .child2 {
            /* border: 25px solid #fff; */
            width: 100px;
            height: 100px;
            background-color: #fff;
        }

加padding

 * {
            margin: 0 auto;
            padding: 0 auto;
            box-sizing: border-box;
        }

        div {
            margin: 25px;
            border-radius: 50%;
            /* border: 1px solid red; */
             padding: 1px; 
        }

        .parent {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .child1 {
            width: 150px;
            height: 150px;
            background-color: gray;
        }

        .child2 {
            width: 100px;
            height: 100px;
            background-color: #fff;
        }

加overflow:hidden

 * {
            margin: 0 auto;
            padding: 0 auto;
            box-sizing: border-box;
        }

        div {
            margin: 25px;
            border-radius: 50%;
            /* border: 1px solid red; */
            /* padding: 1px; */
            overflow: hidden;
        }

        .parent {
            /* border: 25px solid red; */
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .child1 {
            /* border: 25px solid gray; */
            width: 150px;
            height: 150px;
            background-color: gray;
        }

        .child2 {
            /* border: 25px solid #fff; */
            width: 100px;
            height: 100px;
            background-color: #fff;
        }

这样在看就不会有margin塌陷的问题存在了

关于margin塌陷

Margin塌陷