2021-06-19

最新推荐文章于 2025-05-08 13:35:18 发布

云诗卡达

最新推荐文章于 2025-05-08 13:35:18 发布

阅读量156

点赞数

分类专栏： HTML+CSS 文章标签： css html

原文链接：https://zhuanlan.zhihu.com/p/337857229

版权

HTML+CSS 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了CSS中外边距塌陷和合并的现象，包括它们的定义和示例。外边距塌陷发生在父子元素间，导致较大的上外边距覆盖较小的一个。解决方案包括设置父元素的border或padding，以及触发BFC。外边距合并则出现在相邻元素间，解决方法是只设置一个元素的外边距或创建独立的BFC。理解并掌握这些概念对于优化CSS布局至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS中外边距（margin）塌陷和合并的问题

前言

很多前端的初学者，在使用margin的之后或许会遇到一些问题，比如我设置的margin-top为何不起作用呢?这些问题很有可能就是margin外边距塌陷的问题。下面主要讲margin外边距塌陷和margin外边距合并的问题。继续往下看，告诉你怎么解决这些问题。
注意浮动的盒子不会有外边距合并的问题

一、什么是外边距塌陷

两个嵌套关系的（父子关系）块元素，当父元素有上外边距或者没有上外边距（margin-top），子元素也有上外边距的时候。两个上外边距会合成一个上外边距，以值相对较大的上外边距值为准。如下图：

这种现象就是外边距的塌陷问题。这个时候你就会发现你给父元素设置的margin-top：50px是没有效果的。或者在你需要调整子元素的上边距相对于父元素产生一定的距离的时候也是没有效果的。这种外边距塌陷的问题可以说是css中的一个bug。因为这种现象我们通常是需要避免的，也是我们不需要的，因为在页面布局中，使用margin-top通常是希望子元素的顶部相对于父元素的顶部产生一定的距离。比如在使用margin调整子元素相对于父元素居中的时候。那么又应该如何去解决这个问题呢？

1、给父元素设置外边框（border）或者内边距（padding）(不建议)

这种方案虽然可以解决外边距塌陷的问题，但是border和padding毕竟会撑大盒子，处理不好也会出问题，所以推荐使用这种方式。

2、触发BFC（推荐）

BFC：Block Formatting Context，块级格式化上下文，BFC决定了元素对其内容定位，以及当前元素与其他元素之间的关系和相互作用。其目的就是形成一个独立的空间，让空间中的子元素不会影响到这个独立空间之外的布局。这样我们在写页面的时候就可以根据自己的需求，选择一些比较合适的解决方案，主要解决方案如下：

子元素或者父元素的float不为none
子元素或者父元素的position不为relative或static
父元素的overflow为auto或scroll或hidden
父元素的display的值为table-cell或inline-block

其他的解决方案，可以自行去尝试一下，这里不再举例说明。

二、什么是外边距合并

这种现象发生在两个并列的元素之间。给一个元素设置下外边距（margin-bottom），并同时给一个元素设置上外边距（margin-top）。两个元素之间的距离不等于这两个外边距之和，而是等于其中最大的一个外边距。如下图：

这种现象就是外边距的合并问题。

1、解决方案一：只设置其中一个元素的margin值即可（推荐）

在实际的开发中，可以根据自己的需求，设置其中一个元素的margin值即可。比如本例中，可以设置第一个元素的margin-bottom的值而不设置第二个元素的margin-top值。反之亦然。

2、解决方案二：给每一个元素添加父元素，然后触发BFC规则（不推荐）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距塌陷</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.father-box{
                        /*解决外边距合并 */
				overflow: hidden;
			}
			.first{
				width: 400px;
				height: 200px;
				margin-bottom: 50px;
				background: purple;
			}
			.second{
				width: 400px;
				height: 200px;
				margin-top: 100px;
				background: green;
			}
		</style>
	</head>
	<body>
		<div class="father-box">
			<div class="first"></div>
		</div>
		<div class="father-box">
			<div class="second"></div>
		</div>
	</body>
</html>