css中常见margin塌陷问题之解决办法

塌陷问题

 

当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。

①垂直并列

　　　　首先设置两个DIV,并为其制定宽高
  1. 复制代码
    复制代码
     1 /*HTML部分*/
 2 <body>
 3     <div class="box1">box1</div>
 4     <div class="box2">box2</div>
 5 </body>
 6 /*CSS部分*/
 7 <style> 
 8     *{
 9          margin: 0; 
10          padding: 0; 
11     }
12      .box1{ 
13          width: 200px; 
14          height: 200px; 
15          background: yellowgreen;
16      } 
17     .box2{ 
18          width: 200px; 
19          height: 200px; background: gray; 
20     }
21 </style>
    复制代码
    复制代码

     

          
 　　　 
　　　  对box1我们为其设置margin-bottom：50px;
　　 　　对box2我们为其设置margin-top： 40px;
  1. 复制代码
    复制代码
     1 <style>
 2 *{
 3     margin:0;
 4     padding:0;
 5 }
 6 .box1{
 7     width:200px;
 8     height:200px;
 9     background: yellowgreen;
10     margin-bottom: 50px;
11 }
12 .box2{
13     width:200px;
14     height:200px;
15     background: gray;
16     margin-top: 40px;
17 }
18 </style>
    复制代码
    复制代码
 　　　  我们肯定会很理所当然的认定这两个盒子之间的距离为90px，事实上并非如此.
　　　  如下图所示：
          
　　　  两盒子之间的距离仅是50px，也就是说两盒子之间的margin出现了重叠部分，故而我们可以得出：垂直之间塌陷的原则是以两盒子最大的外边距为准。
 

②嵌套关系(父级元素塌陷)

  1. 复制代码
    复制代码
     1 /*CSS部分*/
 2 <style>
 3 .box1{
 4     width:400px;
 5     height:400px;
 6     background: pink;
 7 }
 8 .box2{
 9     width:200px;
10     height:200px;
11     background: lightblue;
12 }
13 </style>
14 /*HTML部分*/
15 <body>
16     <divclass="box1">
17     <divclass="box2"></div>
18 </div>
19 </body>
    复制代码
    复制代码
　　　  如图示
 
         
　　　 当为子盒子添加margin-top：10px;时会发生如下情况：
          
　　　 子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子一起与页面顶端产生了10px间隙（即父级盒子往下塌陷了10px）。
 
解决方法：
（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合  （可以设置成透明：border：1px solid transparent）。
（2）为父盒子添加overflow：hidden；
（3）为父盒子设定padding值；
（4）为父盒子添加position：fixed；
（5）为父盒子添加 display：table；
（6）利用伪元素给子元素的前面添加一个空元素
.son:before{ content:"";
             overflow:hidden; }

 

 

posted @   小奔的早晨  阅读(18365)  评论(1)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· 单线程的Redis速度为什么快？
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
点击右上角即可分享
微信分享提示
AI IDE Trae