外边距合并-嵌套块元素塌陷问题

最新推荐文章于 2024-09-21 23:59:03 发布

wiry_碎碎念

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量88

点赞数

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

本文链接：https://blog.csdn.net/weixin_42247414/article/details/127764604

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在CSS布局中，当一个父元素包含一个有上外边距的子元素时，可能会出现高度塌陷问题。本文探讨了这个问题，并提供了三种解决方案：1) 设置父元素的上边框为透明；2) 添加父元素内边距；3) 使用父元素的overflow属性隐藏内容。通过这些方法，可以有效地避免嵌套块元素的高度塌陷，确保布局的正常显示。

摘要由CSDN通过智能技术生成

嵌套块元素塌陷问题及解决方案

- 嵌套块元素塌陷问题
- 解决方案

嵌套块元素塌陷问题

两个嵌套关系（父子关系）的块元素，子盒子有上边距（margin），会出现高度塌陷问题。
在这里插入图片描述

解决方案

父元素设置上边框 border: 1px solid transparent;
父元素设置内边距 padding: 1px;
父元素添加 overflow: hidden;

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

  <style>
    .father {
      background-color: steelblue;
      height: 1200px;
      width: 100%;
      /* border: 1px solid transparent; */
      /* padding: 1px; */
      /* overflow: hidden; */
    }

    .son {
      background-color: pink;
      width: 300px;
      margin: 200px auto;
      padding: 100px;
    }
  </style>