外边距会出现的问题和解决方法

原创已于 2025-04-24 09:35:29 修改 · 462 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

当前文章被以下社区和专栏收录：

于 2025-04-10 10:10:57 首次发布

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           *{
               margin: 0;
               padding: 0;
           }
           div{
               width: 600px;
               height: 300px;
           }
           .box1{
               background-color: aqua;
               margin-bottom: 100px;
           }
           .box2{
               background-color: aquamarine;
               /* margin-top: 50px; */ /* 解决合并问题 */
           }
           /* 相邻盒子垂直方向外边距合并问题：只需要给其中一个盒子设置外边距 */
           .bigbox{
               width: 500px;
               height: 600px;
               background-color: black;
               margin-top: 200px;
               /* border: 1px solid red; */
               /* padding-top: 120px; */
               overflow: hidden; /* 超出部分:隐藏;解决外边距塌陷问题 */
           }
           .bigbox .sbox{
               width: 300px;
               height: 300px;
               background-color: aqua;
               margin-top: 120px;
           }
           /* 嵌套块级盒子垂直方向外边距塌陷：
           解决方法1：给父盒子设置边框
           解决方法2：给父盒子添加padding(但会把盒子撑大)，不推荐使用。
           解决方法3：给父盒子添加overflow:hidden
           */
       </style>
   </head>
   <body>
       
       <div class="bigbox">
       <div class="sbox"></div>
       </div>
   </body>
</html>