<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#container {
width: 1000px;
margin: 50px auto;
}
/*margin合并问题*/
#demo4 .shape {
width: 200px;
height: 100px;
background-color: #F25A5A;
}
#demo4 .one {
margin-bottom: 100px;
}
#demo4 .two {
margin-top: 80px;
}
#demo4 .three,
#demo4 .four {
display: inline-block;
}
#demo4 .three {
margin-right: 100px;
}
#demo4 .four {
margin-left: 100px;
}
#demo4 .five {
margin-right: 100px;
}
#demo4 .six {
margin-left: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="demo4" class="demoC">
<h1>margin合并问题</h1>
<div>
<div class="shape one">one</div>
<div class="shape two">two</div>
</div>
<div>
<div class="shape three">three</div>
<div class="shape four">four</div>
</div>
<div>
<span class="five">five</span>
<span class="six">six</span>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
</html>
- 块级元素垂直合并
- 块级行内元素水平方向不会合并
- 行内元素水平方向不会合并
如下图