div內部塊級元素，比如p,div，設置外間距（margin）的話會怎樣（IE6正常，此處建立在標準瀏覽器基礎之上，測試環境：FF，Opera）。本來還納悶div莫名奇妙的怎麼多出了一些外邊距，甚至設置margin爲0，都不能解決問題。到底是怎麼回事呢。看示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div {margin:0;padding:0;}
#top,#bottom {background:red;}
#bottom{background:green;}
p{margin:20px;margin:0;}
#div {margin:30px;margin:0;}
</style>
</head>
<body>
<div id="top">
<p>p-tag margin<p>
</div>
<div id="bottom">
<div id="div">div margin</div>
</div>
</body>
</html>
此代碼產生的是一個可以預料到的結果，看截圖：
針對css修改一下，看這兩句：
/* 此時margin爲0，效果OK */
p{margin:20px;margin:0;}
#div {margin:30px;margin:0;}
/* 接下來先去掉p標籤的margin:0;讓前面的定義生效 */
p{margin:20px;}
#div {margin:30px;margin:0;}
結果呢，效果截圖：
有點奇怪，預料中，p-tag爲id=top的div的子元素，應該是把top div 撐大才對，top div並沒有限制高度啊。
結果就是top div 多出了外邊距。那麼換#div 去掉margin:0的限制，p加上margin:0；結果還是這樣。就是說，不僅僅是p標籤會引起這樣的問題，故猜測所有的塊級元素都會這樣的。
當時佈局時，FF下就出現了此種現象（但Opera正常。。。），但是沒找到什麼原因，後來再次次碰到，總算摸到規律了。
既然知道這樣會引起問題，那麼就可以避免這種佈局寫法。實在不能避免呢？巧合中，我找到了一種解決方法。
第一次碰到這種現象時，由於不知道原因，很納悶，firedebug也看不出什麼問題，而我有個習慣就是給元素加border看範圍。一加border不要緊，居然修正了bug？！但是，這個border怎麼辦，不是所有的元素需要border的，於是加1px border的同時設置margin:-1px;這樣就可以了，另外border的顏色設置和背景一樣，防患於未然。
下面就是解決方案（除非你避免這種情況）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
<!--
//-->
</script>
<style type="text/css">
div {margin:0;padding:0;}
/* 這裏添加修正代碼 border:1px solid #000;margin:-1px*/
#top,#bottom {background:red; border:1px solid #000;margin:-1px;}
#bottom{background:green;}
p{margin:20px;}
#div {margin:30px;margin:0;}
</style>
</head>
<body>
<div id="top">
<p>p-tag margin<p>
</div>
<div id="bottom">
<div id="div">div margin</div>
</div>
</body>
</html>
效果預覽：
雖然還有border，但是-1px的margin至少不讓寬度和高度增加，加入border顏色和背景一致也看不出來了。
2009年7月20日11:50:01
惱火，終於搜到一個解決方法，奇怪，當初我也是這麼加的屬性貌似沒生效啊，今天卻生效了。。。
http://www.women8.cn/Skill/Info.asp?infoid=24,參考資料，不是說的，這種問題的關鍵詞還挺難想，搜出來，偶剛發的這篇還能排的上號。。。。。。
寫這篇文章的人還真搞笑，知道解決方法，卻不會組合。。。。偶下面組合一下，就全面兼容了：
#top {
overflow:hidden; /* 針對FF，Opera有效 */
zoom:1; /* 對IE有效 */
}