css盒子外边距塌陷解决办法

最新推荐文章于 2025-04-28 12:20:34 发布

ban小白

最新推荐文章于 2025-04-28 12:20:34 发布

阅读量104

点赞数

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/qq_45334070/article/details/134615822

版权

本文介绍了CSS中嵌套块元素时，子元素margin-top可能导致的父元素塌陷问题。通过转换显示模式、添加内边距或边框、使用`overflow:hidden`或伪元素等方法，详细展示了如何避免和解决这一问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css盒子外边距塌陷解决办法

	会出现塌陷的场景：
	    嵌套的两个块元素   子元素的margin-top  会作用在父元素身上  导致父元素一起往下移动

结构部分

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

在这里插入图片描述出现的场景
解决后想要的样子或者类似的解决后的样子

样式部分

.father {
      width: 300px;
      height: 300px;
      background-color：pink;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: orange;
      margin-top: 100px;
    }
    .box {
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }

解决思路：从形成的条件着手，1两个块元素，2边距重合
解决塌陷问题：
1、转换显示模式（只要任意一个盒子不是块元素就行）
2、给父元素加顶部内边距将父子元素的边缘隔开
3、给父元素加顶部边框将父子元素的边缘隔开
4、overflow:hidden
5、伪元素`
.father::before {
/* 伪元素给加属性 /
/ content: ‘.’; */
}