1. 程式人生 > >div巢狀後margin出現失效(轉移)的問題

div巢狀後margin出現失效(轉移)的問題

在一次寫頁面時,發現div巢狀後margin居然失效了,直接作用到了外層div上,調了好了一陣子發現css應該沒有寫錯。於是想,會不會有什麼潛在的我不知道的因素,一搜果然發現有許多人遇到了類似的問題,轉載於此。

現象:在一些瀏覽器中,有兩個巢狀關係的div,如果外層div的父元素padding值為0,那麼內層div的margin-top或者margin-bottom的值會“轉移”給外層div。

原因:盒子沒有獲得 haslayout 造成 margin-top 無效。

解決的幾種辦法,請根據實際情況選用:

  1. 在父層div加上:overflow:hidden;

  2. 把margin-top外邊距改成padding-top內邊距;

  3. 父元素產生邊距重疊的邊,有不為 0 的 padding 或 寬度不為 0 且 style 不為 none 的 border;父層div加:padding-top: 1px;

  4. 讓父元素生成一個 block formating context(實現方法見下表);父層div加:

float: left/right
position: absolute
display: inline-block/table-cell (或其他 table 型別)
overflow: hidden/auto