CSS margin合併問題

2021-06-27 20:23:59 字數 289 閱讀 8639

margin摺疊的產生有幾個條件:

垂直方向上毗鄰的box不會發生摺疊的情況:

摺疊邊距的計算

當兩個margin都是正值的時候,取兩者的最大值;當 margin 都是負值的時候,取的是其中絕對值較大的,然後,從 0 位置,負向位移;當有正有負的時候,先取出負 margin 中絕對值中最大的,然後,和正 margin 值中最大的 margin 相加。但必須注意,所有毗鄰的margin要一起參與運算,不能分步進行。

bfc有三個特性

我們可以對父容器新增這些屬性來形成bfc達到「清浮動」效果

css margin塌陷問題

垂直並列 先設定兩個div,並分別設定寬高背景色。挨著不太好看,在原來樣式的基礎上給兩個div設定margin box1設定margin bottom 40px box2設定margin top 20px box1 box2 按照正常的思維40 20 60,所以box1和box2的邊距應該是60px...

css margin塌陷問題

html block1 block2 同級元素1 同級元素2 同級元素3 css body block1 block2 ib 結果圖1 圖2 圖3 先看block1跟block2,按道理說,block1 有margin bottom 10px block2有margin top 20px 那麼blo...

css margin重疊的問題

margin 20px margin 20px 重疊 藍色的上20邊距與灰色背景div的20上邊距重疊 藍色方塊的下20畫素邊距與紅色方塊的上20畫素布局重疊 紅色方塊的20畫素的下邊距與灰色盒子的20畫素下邊距重疊。由於ie瀏覽器和非ie瀏覽器兩大陣營對處理margin重疊問題上有較大差異,所以解...