css、html中外边距合并-嵌套块元素塌陷

最新推荐文章于 2024-06-27 15:44:29 发布

黄丫丫07

最新推荐文章于 2024-06-27 15:44:29 发布

阅读量148

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_51495354/article/details/127819742

版权

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并

相邻上下两个块元素（兄弟之间）相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则他们之间的垂直间距不是margin-top和margin-bottom之和。取两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并。

解决方案：尽量只给一个盒子添加margin值。

嵌套块元素垂直外边距的塌陷：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

可以给父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow：hidden；

还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题。

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>外边距合并-嵌套块级元素垂直外边距塌陷</title>

    <style>

        .father {

            width: 400px;

            height: 400px;

            background-color: purple;

            margin-top: 50px;

            /* 下面三句任意一种均可解决塌陷问题 */

            /* border-top: 1px solid transparent; */

            padding-top: 1px;

            /* overflow: hidden; */



        }



        .son {

            width: 200px;

            height: 200px;

            background-color: aqua;

            margin-top: 100px;

        }

    </style>

</head>



<body>

    <div class="father">

        <div class="son"></div>

    </div>

</body>



</html>