盒子塌陷问题

最新推荐文章于 2023-08-17 11:09:40 发布

梦寐V

最新推荐文章于 2023-08-17 11:09:40 发布

阅读量303

点赞数 2

文章标签： css html5 css3 html

本文链接：https://blog.csdn.net/qq_68609773/article/details/125207227

版权

（一）上下盒子塌陷问题

上盒子定义下外边距，下盒子定义上外边距时，两盒子之间的距离并不是（margin-bottom） +（ margin-top）的距离，而是两者之间的最大值。

（二）嵌套盒子塌陷问题

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .a{
        width: 200px;
        height: 200px;
        background-color: aqua;
        margin-left: 400px;
        
    }
    .a1{
        width: 50px;
        height: 50px;
        background-color: black;
        margin-top: 100px;
    }
    
</style>
<body>
   <div class="a">
       <div class="a1"></div>
   </div>
</body>

以上便是盒子塌陷的问题；解决办法如下：

1.父盒子设置透明的上边框；

2.父盒子设置padding内边距，这样就不用再设置内盒子的上外边距了；

3.父盒子添加overflow：hidden；

4.父盒子添加display:inline-block;

5:父盒子添加float浮动；

6.父盒子添加绝对定位position：absolute；