其他分享
首页 > 其他分享> > 盒子模型：外边距合并+嵌套块级元素垂直外边距塌陷

盒子模型：外边距合并+嵌套块级元素垂直外边距塌陷

作者：互联网

问题一：外边距合并

<title>外边距合并-相邻块级元素垂直外边距合并</title>
    <style>
        .damao, .ermao {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .damao {
            margin-bottom: 100px;
        }
        .ermao {
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <div class="damao">大毛</div>
    <div class="ermao">二毛</div>
</body>

问题二：嵌套块级元素垂直外边距塌陷

 <title>外边距合并-嵌套块级元素垂直外边距塌陷</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            /* border: 1px solid red; */
            /* border: 1px solid transparent; */
            /* padding: 1px; */
            overflow: hidden;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>

problem：给子元素添加上外边距，父元素会塌陷较大的外边距。

solution：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

父元素没有边框或overflow: hidden;时如第一张图所示，加上之后的效果看下一张图，粉色在紫色中垂直居中。

i

标签：块级,元素,合并,嵌套,外边,margin,200px
来源： https://www.cnblogs.com/Cookie-Jing/p/15865277.html