如下**：
<div
style
=" width:1000px; height:700px; margin:auto;"
>
<
div
style
=" width:1000px; height:49px; margin-top:281px; "
>
<
span
style
="display:inline-block; width:121px; height:49px; margin-left:230px;"
>
<
a href
="#"
>
<
img
name
="r2_c2"
src="shc.png"
width
="121"
height
="49"
border
="0"
id="btn1"
alt=""
/>
a>
span
>
div>
div>
會發現，內層div的margin-top顯示在了外層div上。
這個「問題」……它是css2.1的盒模型中規定的內容——collapsing margins：
in this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
解決方案：
給outer div加上 padding/border，或者
1.給父層新增：overflow:hidden;
2.給父層新增：padding 或 border除none以外的屬性
3.給父層新增：padding-top代替margin-top的效果。
4.給 外層div /內層div設定為 float/position:absolute(css2.1規定浮動元素和絕對定位元素不參與margin摺疊)。
關於DIV多層巢狀的margin top的BUG
今天在做登入頁面的時候發現個margin top的bug 初始 如下 html css errorstyle結果發現ie6.ie7正常，ie8,ff顯示錯誤。癥結 當兩個容器巢狀時,如果外層容器和內層容器之間沒有別的元素,firefox會把內層元素的margin top作用于父元素。解決方案 1 使...
div巢狀引起的margin top不起作用
巢狀div中margin top轉移問題的解決辦法 在這兩個瀏覽器中，有兩個巢狀關係的div，如果外層div的父元素padding值為0，那麼內層div的margin top或者margin bottom的值會 轉移 給外層div。上部層解決辦法 1 在父層div加上 overflow hidden...
css元素巢狀之塌陷問題
style height 40px background color aqua margin top 30px style width 50px height 40px background color blue div div 結果 這個時候給子元素新增上外邊距 style height 40px...