Maizify/firefox_margin.html

## firefox_margin.html
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
	<title>神奇的margin</title>
</head>
<body>

<style>
body{
	margin:0;
}
#page {
	width:300px;
	float:left;
	background:#DDD;
}
#inner1 {
	margin-bottom:20px; /* firefox、chrome表现不一致 */
/* 	padding-bottom:20px; */ /* 注释margin-bottom，改用padding-bottom，则表现一致 */
	background:red;
	clear:both;
	position:relative;
}
#inner2 {
	float:left;
}
.clear {
	clear:both;
}
</style>

<div id="page">

	<div id="outer1">

		<div id="inner1">
			<div id="inner2">
				我的顶上应该没空隙
			</div>
			<div class="clear"></div>
		</div>

	</div>

</div>


</body>
</html>
	<!DOCTYPE HTML>
	<html lang="zh-CN">
	<head>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
	<title>神奇的margin</title>
	</head>
	<body>

	<style>
	body{
	margin:0;
	}
	#page {
	width:300px;
	float:left;
	background:#DDD;
	}
	#inner1 {
	margin-bottom:20px; /* firefox、chrome表现不一致 */
	/* padding-bottom:20px; / / 注释margin-bottom，改用padding-bottom，则表现一致 */
	background:red;
	clear:both;
	position:relative;
	}
	#inner2 {
	float:left;
	}
	.clear {
	clear:both;
	}
	</style>

	<div id="page">

	<div id="outer1">

	<div id="inner1">
	<div id="inner2">
	我的顶上应该没空隙
	</div>
	<div class="clear"></div>
	</div>

	</div>

	</div>


	</body>
	</html>