外边距塌陷

最新推荐文章于 2023-12-14 17:18:41 发布

搬砖搬到互联网

最新推荐文章于 2023-12-14 17:18:41 发布

阅读量65

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_64204485/article/details/131854365

版权

1 外边距塌陷

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

1.1 兄弟关系的外边距塌陷

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

在这里插入图片描述

两个兄弟元素，第一个兄弟元素有底部外边距，第二个兄弟元素有顶部外边距，然后二者的外边距会发生一个合并

解决办法：

给其中一个元素的display设置为inline-block;
给其中一个元素包一个盒子，然后给他的盒子设置一个overflow: hidden;

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    	.box{
    		overflow: hidden;
    	}
        .box1{
            width: 300px;
            height: 200px;
            background-color: pink;
            margin-bottom: 50px;
          /*display: inline-block;*/
        }
        .box2{
            width: 300px;
            height: 200px;
            background-color:chartreuse;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="box2">
        
    </div>
    
    
    <div class="box">
    	<div class="box1">
    	</div>
    </div>
    <div class="box2">
        
    </div>
</body>
</html>

1.2 父子关系的外边距合并

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

在这里插入图片描述

解决办法：

给父元素的display设置为inline-block;
给父元素设置一个overflow: hidden;

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 300px;
            height: 200px;
            background-color: pink;
            margin-top: 40px;
          /*display: inline-block;*/
            overflow: hidden;
        }
        .son{
            width: 300px;
            height: 100px;
            background-color:chartreuse;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>