margin折叠问题（margin塌陷问题）：垂直方向

猿究院_冯旭阳

于 2024-09-02 19:51:41 发布

阅读量546

点赞数 23

文章标签：前端 css html5

本文链接：https://blog.csdn.net/m0_73785340/article/details/141826791

版权

我们在设置外边距的时候经常会出现三个问题，接下来变分来举例讨论哪三种情况。

情况一：自身折叠问题。

当元素内容、边框、宽高以及内边距都没有设置时，页面显示空白。我们都知道div属于块级元素，自占一行、自动换行，且默认宽度为页面的100%，那就以div举例，只设置背景颜色，不设置上述所说任何内容。就如下行代码和展示图所示：

<!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>

div{

background-color: blue;

}

</style>

</head>

<body>

<div></div>

</body>

</html>

由图可以看出，页面内是空白不显示的。

解决方案也很简单：给元素设置内容或边框或宽高或内边距其中一个时，页面可以正常显示。那我们随机选个例子，设置div标签的宽和高，代码如下：

<!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>

div{

background-color: blue;

width: 100px;

height: 100px;

}

</style>

</head>

<body>

<div></div>

</body>

</html>

页面显示效果如下图所示：

我们可以看到div标签正常显示在页面中，那么设置内容或边框或宽高或内边距其中一个便是解决方法。

情况二：相邻两个元素之间的折叠。

上方的元素设置margin-bottom，下方的元素设置margin-top，而往往会出现两个数值
设置一致，取其中一个；两个数值不同时，取最大值。那么我们设置两个div进行测试。

<!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>

.box1,.box2,.box3{

width: 100px;

height: 100px;

}

.box1{

background-color: aqua;

margin-bottom: 50px;

}

.box2{

background-color:greenyellow ;

margin-top: 50px;

}

</style>

</head>

<body>

<div class="box1">box1</div>

<div class="box2">box2</div>

</body>

</html>

然后再将box2的margin-top设置为100px，进行对比，对比图如下：

由上图我们可以确认，两个数值设置一致，取其中一个:两个数值不同时，取最大值。

因而对于这种情况的重叠，给出的解决方案是：只给其中一个元素设置外边距。这样在本来就知道外边距的情况下只设置其中一个，还能省略另一行代码。

情况三：父子元素之间的折叠。

子元素设置margin-top，父元素会随之一起移动。仍旧是先来设置父子元素进行验证，先给父子元素设置宽高和背景色，然后给子元素增加margin-top，代码如下：

<!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>

.parent{

width: 200px;

height: 200px;

background-color: chartreuse;

}

.child{

width: 100px;

height: 100px;

background-color: darkorchid;

margin-top: 100px;

}

</style>

</head>

<body>

<div class="parent">

<div class="child"></div>

</div>

</body>

</html>

页面显示如下图：

由上图我们可以确认，父元素确实会随着子元素一起移动。

        解决方案有三种，如下所示:
        1.子元素不设置margin-top，父元素设置padding-top。
        2.子元素设置margin-top，父元素设置边框。
        3.子元素设置margin-top，父元素设置overflow:hidden。

先来讲讲第一种解决方案，由于子元素设置margin-top会导致父元素移动，那么我们反方向思考，设置父元素的内边距，这样在不导致父元素进行移动的情况下设置父元素和子元素的边距。代码和效果图如下所示：

<!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>

.parent{

width: 200px;

height: 200px;

background-color: chartreuse;

padding-top: 20px;

}

.child{

width: 100px;

height: 100px;

background-color: darkorchid;

}

</style>

</head>

<body>

<div class="parent">

<div class="child"></div>

</div>

</body>

</html>

但是这种方式会增加父元素的高度，需要手动修改父元素相应的高度。

第二种解决方案：

在子元素设置margin-top的情况下，父元素设置边框，代码和效果图如下图所示：

<!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>

.parent{

width: 200px;

height: 200px;

background-color: chartreuse;

border: 1px solid chartreuse;

}

.child{

width: 100px;

height: 100px;

background-color: darkorchid;

margin-top: 50px;

}

</style>

</head>

<body>

<div class="parent">

<div class="child"></div>

</div>

</body>

</html>

由图可以看出父元素不移动并且子元素正常移动，但是因为增加了边框，同样是增加了父元素的大小，因此方法二能不用就不用。

第三种解决方法：

在子元素设置margin-top的情况下，父元素设置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>

.parent{

width: 200px;

height: 200px;

background-color: chartreuse;

overflow: hidden;

}

.child{

width: 100px;

height: 100px;

background-color: darkorchid;

margin-top: 50px;

}

</style>

</head>

<body>

<div class="parent">

<div class="child"></div>

</div>

</body>

</html>