代码
<!doctype html>
<html>
<head>
<title>margin合并和margin塌陷</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Pragma" content="no-cache"/>
</head>
<style>
#wrap {
300px;
height: 300px;
background-color: blue;
margin-top: 100px;
/*margin塌陷 第一种解决*/
/*position: absolute;*/
/*margin塌陷 第二种解决*/
/*display: inline-block;*/
/*margin塌陷 第三种解决*/
/*float: left;*/
/*margin塌陷 第四种解决*/
/*overflow: hidden;*/
/*margin塌陷 第五种解决 不推荐 增加了1px*/
/*border-top: solid blue 1px;*/
/*margin塌陷 第六种解决 webkit*/
/*-webkit-box-sizing: content-box;*/
/*-moz-box-sizing: content-box;*/
/*box-sizing: content-box;*/
}
#content {
position: relative;
left: 50px;
margin-top: 150px;
100px;
height: 100px;
background-color: red;
}
#wrap2 {
height: 10px;
margin-bottom: 50px;
background-color: blue;
}
#content2 {
height: 10px;
margin-top: 100px;
background-color: red;
}
</style>
<body>
<h1>margin塌陷</h1>
<div id="wrap">
<div id="content"></div>
</div>
<br/>
<hr/>
<br/>
<h1>margin合并</h1>
<div id="wrap2"></div>
<div id="content2"></div>
</body>
</html>