CSS3——margin合并，塌陷与合并的总结

最新推荐文章于 2025-07-08 14:15:23 发布

H_Cisco

最新推荐文章于 2025-07-08 14:15:23 发布

阅读量7.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css HTML

本文链接：https://blog.csdn.net/hdq1745/article/details/84172572

css 同时被 3 个专栏收录

28 篇文章

订阅专栏

css3

24 篇文章

订阅专栏

HTML

16 篇文章

订阅专栏

本文详细解析了CSS中兄弟元素之间的Margin合并与塌陷现象，解释了这两种现象的区别及产生的原因，并提供了有效的解决方案，包括使用BFC（Block Formatting Context）等技巧。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.demo1{
				background-color: red;
			}
			.demo2{
				background-color: green;
			}
		</style>
		<title></title>
	</head>
	<body>
		<span class="demo1">123</span>
		<span class="demo2">234</span>
	</body>
</html>

两个span，他俩要是横着排列（加一个水平方向的margin）的话，应该中间有一个空隙吧，文本分隔符，应该分开。

现在我给demo1加一个margin-right: 100px;，这个demo1会把demo2挤到他的右边吧

现在再给demo2加一个margin-left: 100px;，这个demo2会离demo1这个盒子更远。如下：

说明区域不能共用吧！

现在div出场：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.demo1{
				background-color: red;
				margin-right: 100px;
			}
			.demo2{
				background-color: green;
				margin-left: 100px;
			}
			.demo3{
				background-color: red;
			}
			.demo4{
				background-color: green;
				
			}
		</style>
		<title></title>
	</head>
	<body>
		<span class="demo1">123</span>
		<span class="demo2">234</span>
		<div class="demo3">1</div>
		<div class="demo4">2</div>
	</body>
</html>

现在我给demo3加一个margin-bottom: 100px;他就把demo4顶开了。如下：

demo4说：你让我走开，我也让你走开，给demo4加一个

margin-top: 100px;

没变，这个问题说明是什么？

两个兄弟结构的元素，他俩垂直方向的margin是合并的。

比如：我现在把demo3的margin改成margin-bottom: 200px;

是不是中间加起来是200px

这也算是一个bug，它也可以通过bfc来解决。

做法：

给demo4写一个demo层，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.demo1{
				background-color: red;
				margin-right: 100px;
			}
			.demo2{
				background-color: green;
				margin-left: 100px;
			}
			.demo3{
				background-color: red;
				margin-bottom: 200px;
			}
			.demo{
				overflow: hidden;
			}
			.demo4{
				background-color: green;
				margin-top: 100px;
				
			}
		</style>
		<title></title>
	</head>
	<body>
		<span class="demo1">123</span>
		<span class="demo2">234</span>
		<div class="demo3">1</div>
		<div class="demo">
			<div class="demo4">2</div>
		</div>
	</body>
</html>

这个demo层没干别的事，他就一条overflow: hidden;

这样的话，demo4就在bfc环境里面了，所以这个问题就很好的解决了（或者你把demo3和demo4都放在demo里面）。如下: