块元素塌陷问题解决方案

最新推荐文章于 2022-09-14 15:18:03 发布

才不是小弱鸡

最新推荐文章于 2022-09-14 15:18:03 发布

阅读量385

点赞数

分类专栏： css web

本文链接：https://blog.csdn.net/qq_40996739/article/details/108704121

版权

web 同时被 2 个专栏收录

42 篇文章 2 订阅

订阅专栏

css

19 篇文章 0 订阅

订阅专栏

0x00 嵌套块元素塌陷问题复现

首先是基础代码

<body>
  <div class="father">
    <div class="son">

    </div>
  </div>
</body>
<style>
.father {
  width: 400px;
  height: 400px;
  background-color: black;
}
.son {
  width: 200px;
  height: 200px;
  background-color: aqua;
}
</style>

然后增加father和son的margin属性

<body>
  <div class="father">
    <div class="son">

    </div>
  </div>
</body>
<style>
.father {
  width: 400px;
  height: 400px;
  background-color: black;
  margin: 50px;
}
.son {
  width: 200px;
  height: 200px;
  background-color: aqua;
  margin: 100px;
}
</style>

可以看到这里son块元素margin并没有和预期一样的生效，这种情况称为块元素的塌陷

0x01 解决办法

可以为父元素添加上边框；

可以为父元素定义上内边距；

可以为父元素设置overflow：hidden；

.father {
  width: 400px;
  height: 400px;
  background-color: black;
  margin: 50px;
  border: 1px solid transparent;
  padding-top: 1px;
  overflow: hidden;
}

可以看到问题已经完美解决了

才不是小弱鸡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
块元素塌陷问题解决方案

0x00 嵌套块元素塌陷问题复现首先是基础代码<body> <div class="father"> <div class="son"> </div> </div></body><style>.father { width: 400px; height: 400px; background-color: black;}.son { width: 200px...
复制链接

扫一扫