最近一直在切圖,做靜態頁,做了兩個專題以後才發現乙個問題,就是豎向的margin 會合併,取最大的顯示。如下
如果你這麼寫,class為farter的div本應該是距離上乙個div應該有5畫素;而class為chd的div本應該距離class的farter div上邊距 距離15畫素。結果卻是這兩個div上邊距重合,而同時距離class為farter的div距離其上乙個div應該有15畫素.出現這種狀況怎麼弄呢?
如下:
給最後乙個元素加上display:inline-block;但是ie6和ie7下不完全支援display:inline-block,所以要加上*display:inline;zoom:1即可解決ie6、7的bug;
margin塌陷 margin合併
原理 父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margi會取其中最大的值。正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位。但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣。原理 兩個兄弟結構的元素在垂直方...
margin塌陷以 及 margin合併
3.乙個空元素,沒有border和padding 3.margin合併解決方法 總結 margin 合併就是,當兩個垂直margin相遇時,它們將形成乙個margin。合併的margin等於兩個發生合併的margin中的較大者。合併條件 注意 普通文件流中塊級元素 垂直margin 沒有border...
margin 合併問題
塊級元素的上外邊距 margin top 和下邊外距 margin bottom 有時會合併為單個外邊距,這樣的現象稱為 margin合併 從此定義上,我們可以捕獲以下兩點重要資訊 塊級元素,但不包括浮動和絕對定位元素,儘管浮動和絕對定位可以讓元素塊狀化。只發生在垂直方向上,嚴格來說,是只發生在和當...