CSS margin帶來的塌陷問題

2021-10-23 19:50:43 字數 504 閱讀 3514

塌陷問題

就是當父元素包裹子元素時,子元素設定margin-top時,並不是子元素上邊距離父元素上邊一段距離,而是子元素和父元素同時距離bfc(塊級格式上下文)下邊的距離

如下

body

解決塌陷問題1.給父盒子新增border

2.給父盒子新增padding-top

3.給父盒子新增overflow:hidden

4.父盒子:position:fixed

5.父盒子:display:table

6.給子元素的前面新增乙個兄弟元素屬性為:content:"";overflow:hidden;

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的塌陷現象 標準文件流中,豎直方向的margin不疊加,以較大的為準。水平方向的疊加 哈哈哈哈 嘿嘿嘿嘿 如果不在標準流,比如盒子都浮動了,那麼兩個盒子之間是沒有塌陷現象的 div.p1 p2兩個盒子都浮動了,所以沒有塌陷現象了,margin bottom 40px 和margin to...