margin塌陷问题

最新推荐文章于 2024-05-16 15:59:52 发布

li_aoqi 的博客

最新推荐文章于 2024-05-16 15:59:52 发布

阅读量1.7k

点赞数 1

分类专栏： margin塌陷文章标签： html css

本文链接：https://blog.csdn.net/li_aoqi/article/details/115585572

版权

margin塌陷专栏收录该内容

1 篇文章 0 订阅

订阅专栏

margin塌陷问题

在web开发中，你是否在开发中出现了margin塌陷的类似问题，你是如何解决的呢？况且你是否真的明白margin塌陷的原理是什么？

margin塌陷问题主要是这种情况，当你在写嵌套盒子的时候，如果你想让里面嵌套的小盒子上边距向下调整时，如果不加任何样式设置的话，当给里面子元素设置向下边距时，它就会“穿透”外面的父级元素，使其带动父元素会一起向下移动，那么这样就造成了margin塌陷的问题。
深度研究的话，其实盒子的初始状态是标准的盒子，当想让它触发了BFC规范以后,形成了相对独立的容器，是不会受外其他外界影响的。

下面看一个引发 maigin塌陷的dome：

<style>
         body{
             border: 3px solid rgb(3, 3, 3);
         }
         div.fbox{
             width: 300px;
             height: 300px;
             background-color: pink;
         }
         div.cbox{
             width: 150px;
             height: 150px;
             background-color: green;
             margin-top: 30px;   /*给子元素添加外上边距*/
         }
     </style>
     
     <body>
    <div class="fbox">
        <div class="cbox">子元素</div>
    </div>
</body>

当浏览器渲染出来的时，会出现这样情况，子元素并没有下来，而是带动它父元素一并下来的，如图：
在这里插入图片描述
添加样式后的效果：

效果明显看出，已经出现了类似的问题。那么这样问题又该如何解决呢？
类似这样的问题，可以有以下几种解决办法：

第一：
给父元素添加一个上边框（border-top），这样子元素就会依据父元素的上边框，来移动子元素自身的margin-top。

<style>
         body{
             border: 3px solid rgb(3, 3, 3);
         }
         div.fbox{
             width: 300px;
             height: 300px;
             background-color: pink;
              /*第一种解决办法*/
             border-top: 1px solid transparent;
             /*给父元素添加上边框线为透明色*/
         }
         div.cbox{
             width: 150px;
             height: 150px;
             background-color: green;
             margin-top: 30px;   /*给子元素添加外上边距*/
         }
     </style>
     
     <body>
    <div class="fbox">
        <div class="cbox">子元素</div>
    </div>
</body>

效果：明显解决问题！

在这里插入图片描述

第二：
给父元素添加overflow：hidden 属性，也ok的。

<style>
     body {
       border: 3px solid rgb(3, 3, 3);
     }
     div.fbox {
       width: 300px;
       height: 300px;
       background-color: pink;
       /*第一种解决办法*/
       /* border-top: 1px solid transparent; */
       /*给父元素添加上边框线为透明色*/
       /*第二种解决办法*/
       overflow: hidden;
       /*给父元素添加 overflow: hidden属性 */
     }
     div.cbox {
       width: 150px;
       height: 150px;
       background-color: green;
       margin-top: 30px; /*给子元素添加外上边距*/
     }
   </style>
    
    <body>
   <div class="fbox">
       <div class="cbox">子元素</div>
   </div>
</body>

效果：同样解决问题！在这里插入图片描述

第三：
可以把元素进行类型转换，将display属性设置成 inline-block，方可解决。

<style>
    body {
      border: 3px solid rgb(3, 3, 3);
    }
    div.fbox {
      width: 300px;
      height: 300px;
      background-color: pink;
      /*第一种解决办法*/
      /* border-top: 1px solid transparent; */
      /*给父元素添加上边框线为透明色*/
      /*第二种解决办法*/
      /* overflow: hidden; */
      /*给父元素添加 overflow: hidden属性 */
    }
    div.cbox {
      width: 150px;
      height: 150px;
      background-color: green;
      margin-top: 30px; /*给子元素添加外上边距*/
      /*第三种解决办法*/
      display: inline-block;
       /* 将元素设置成行内块 */
    }
  </style>
   
   <body>
  <div class="fbox">
      <div class="cbox">子元素</div>
  </div>
</body>

效果：一样解决问题！在这里插入图片描述

第四：
既然margin-top有这样的问题，那么也可以给父元素添加padding-top属性，来规范这个问题。

<style>
    body {
      border: 3px solid rgb(3, 3, 3);
    }
    div.fbox {
      width: 300px;
      height: 300px;
      background-color: pink;
      /*第一种解决办法*/
      /* border-top: 1px solid transparent; */
      /*给父元素添加上边框线为透明色*/
      /*第二种解决办法*/
      /* overflow: hidden; */
      /*给父元素添加 overflow: hidden属性 */
      /*第四种解决办法*/
      padding-top: 1px;
      /*给父元素添加 padding-top 属性 */
    }
    div.cbox {
      width: 150px;
      height: 150px;
      background-color: green;
      margin-top: 30px; /*给子元素添加外上边距*/
      /*第三种解决办法*/
      /* display: inline-block; */
      /* 将元素设置成行内块 */
    }
  </style>
   
   <body>
  <div class="fbox">
      <div class="cbox">子元素</div>
  </div>
</body>

效果：方可解决问题！在这里插入图片描述

此外，还有一些属性也可以解决，比如设置绝对定位，固定定位，浮动元素，也是同样可以的。

希望可以给你带来帮助，谢谢！ 2021/4/10

li_aoqi 的博客

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
margin塌陷问题

margin塌陷问题在web开发中，你是否在开发中出现了margin塌陷的类似问题，你是如何解决的呢？况且你是否真的明白margin塌陷的原理是什么？margin塌陷问题主要是这种情况，当你在写嵌套盒子的时候，如果你想让里面嵌套的小盒子上边距向下调整时，如果不加任何样式的话，当你设置里面小盒子时，它就会‘’穿透‘’外面的父级盒子，使其父元素一起向下移动，这样就造成了margin塌陷的问题，深度研究的话，其实是触发了BFC规范了，具体触发啥规范还有待研究。下面看一个引发 maigin塌陷的dome：
复制链接

扫一扫

专栏目录