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

<!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挤到他的右边吧

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

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

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

说明区域不能共用吧！

现在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>

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

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

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

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

margin-top: 100px;

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

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

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

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

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

是不是中间加起来是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里面）。如下:

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

针对这两个bug:

对margin塌陷，咱们解决的方法是多加了css，没改HTML；

但是margin合并，咱们又加了css还加了HTML。

你别看HTML简单，没有了HTML的结构，你css写得再好，花里胡哨的也白搭。

所以你不能因为改bug随随便便加结构，还有办法，你自己去想。

其实这个margin合并的bug你没有必要去解决，比如你现在有两个元素，你想让他俩上下300px，没有必要200px+100px吧，你只需要上面的margin-bottom为300px

就可以了！！和margin塌陷不同，margin塌陷是视觉上的效果，你加个css就能弥补。

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

相关推荐