margin合併: 設定的margin並沒有生效,或沒有按照預想的結果出現
出現的地方:
html:
class
="bro1"
>
div>
class
="bro2"
>
div>
css.bro1
.bro2
bro1的30+bro2的60 = 90 才對,實際上 顯示的只是 60px(瀏覽器會選擇最大的那個)
這個就是一種margin合併問題
如果在 bro1 設定浮動 , 給bro2設定清除浮動,這個時候 br02無論 margin-top 無論設定的多大,瀏覽器都只會 按照bro1 的margin-bottom來
**出現的問題:**給子級(第乙個或最後乙個) 設定margin,子元素並沒有 參照父級,自己在父級內部進行margin的調整,而是帶著父級,一起"下落"了
當然也能消除掉合併問題:
方法:激發bfc
margin 合併問題
塊級元素的上外邊距 margin top 和下邊外距 margin bottom 有時會合併為單個外邊距，這樣的現象稱為 margin合併 從此定義上，我們可以捕獲以下兩點重要資訊 塊級元素，但不包括浮動和絕對定位元素，儘管浮動和絕對定位可以讓元素塊狀化。只發生在垂直方向上，嚴格來說，是只發生在和當...
margin塌陷和margin合併問題及解決方案
父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margin會取其中最大的值.正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位.但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣.margin塌陷解決方法1.給父級設...
margin塌陷 margin合併
原理 父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margi會取其中最大的值。正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位。但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣。原理 兩個兄弟結構的元素在垂直方...