解决！外边距合并-嵌套块元素塌陷

最新推荐文章于 2023-08-11 11:09:19 发布

城楠_327

最新推荐文章于 2023-08-11 11:09:19 发布

阅读量275

点赞数 1

分类专栏： CSS栏文章标签： css html

本文链接：https://blog.csdn.net/weixin_46647170/article/details/117531994

版权

CSS栏专栏收录该内容

10 篇文章 0 订阅

订阅专栏

什么时候会出现外边距合并的现象呢？
两个嵌套关系的块元素，如果父元素和子元素都有垂直外边距，那么父元素会塌陷外边距较大的值，这种现象也就是嵌套块元素塌陷。
在这里插入图片描述

演示一下，我们定义两个嵌套关系的块元素，父元素贴着浏览器上边，子元素贴着父元素上边

    <style>
        body {
            margin: 0;
        }
        
        .dad {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

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

在这里插入图片描述
这时如果我们希望父元素可以距离可视区上边有点距离，不要贴着，我们给父元素加上margin-top: 50px，父元素就带着子元素一起塌下来

	.dad {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 上边距 */
            margin-top: 50px;
        }

在这里插入图片描述
但是我们也希望子元素可以不要贴着父元素上边，也希望可以离父元素上有点距离，我们个子元素加上margin-top: 100px，出现了！

	.son {
            width: 100px;
            height: 100px;
            background-color: red;
            /* 上边距100px */
            margin-top: 100px;  
        }

在这里插入图片描述
效果不是我们希望的，而且父元素带着子元素一起向下塌陷了100px，也就是塌陷较大的margin-top值。

在实际开发中，我们避免不了这样的需求，在很多情况下我们都会有嵌套块元素都有margin-top的需求，那我们该怎么解决呢？

结局方案：

给父元素上边框
给父元素内边距
给父元素添加overflow: hidden

1.给父元素上边框
如果不想影响外观，可以定义透明的上边框：

.dad {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin-top: 50px;
            /* 定义透明的上边框 */
            border-top: 1px solid transparent;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 100px;
        }

在这里插入图片描述
此方案会改变父盒子的大小，不太推荐

2. 给父元素内边距

.dad {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin-top: 50px;
            /* 定义1px的内边距 */
            padding: 1px;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 100px;
        }

在这里插入图片描述
此方法也会改变父元素的大小，也不推荐。

3.给父元素添加overflow: hidden

.dad {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin-top: 50px;
            overflow: hidden;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 100px;
        }

在这里插入图片描述
这个方法不仅能满足我们的需求，也不会改变父元素的大小，推荐使用。

城楠_327

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
解决！外边距合并-嵌套块元素塌陷

什么时候会出现外边距合并的现象呢？两个嵌套关系的块元素，如果父元素和子元素都有垂直外边距，那么父元素会塌陷外边距较大的值，这种现象也就是嵌套块元素塌陷。演示一下，我们定义两个嵌套关系的块元素，父元素贴着浏览器上边，子元素贴着父元素上边 <style> body { margin: 0; } .dad { width: 300px; height:
复制链接

扫一扫