<!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>
扫描二维码关注公众号，回复：
4112523 查看本文章
现在我给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里面）。如下:
