垂直並列
先設定兩個div，並分別設定寬高背景色。
挨著不太好看，在原來樣式的基礎上給兩個div設定margin
box1設定margin-bottom：40px；
box2設定margin-top：20px；
.box1
.box2
兩個div的邊距只有40px，並不是想象中的60，因此可以得出一下結論：處於上下並列的兩個div，當想要分別設定其margin-bottom和margin-top屬性來改變他們的間距時，取它們中的最大值作為兩者之間的間距，如box1的margin-bottom：40px；box2的margin-top：20px；則取box1的margin-bottom：40px；作為兩者的間距。
巢狀關係
設定乙個div，裡面巢狀著另乙個div，分別設定相對應的寬高和背景色。
給子元素設定margin-top：20px；使其和父元素不要挨得那麼近。
結果還是未如能所願，子元素和父元素的間距並不能成功設定，反而父元素與子元素一起與頁面頂端產生了20px間距。
解決這個問題有如下方法：
（1）為父盒子設定border，為外層新增border後父子盒子就不是真正意義上的貼合 （可以設定成透明：border: 1px solid transparent）
（2）為父盒子新增overflow: hidden;
（3）為父盒子設定padding值；
（4）為父盒子新增position：fixed；
（5）利用偽元素給子元素的前面新增乙個空元素
.box1:beforecss 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 top時，並不是子元素上邊距離父元素上邊一段距離，而是子元素和父元素同時距離bfc 塊級格式上下文 下邊的距離 如下body 解決塌陷問題1.給父盒子新增border 2.給父盒子新增padding top 3.給父盒子新增overflow...
CSS Margin塌陷和盒子居中
margin的塌陷現象 標準文件流中，豎直方向的margin不疊加，以較大的為準。水平方向的疊加 哈哈哈哈 嘿嘿嘿嘿 如果不在標準流，比如盒子都浮動了，那麼兩個盒子之間是沒有塌陷現象的 div.p1 p2兩個盒子都浮動了，所以沒有塌陷現象了，margin bottom 40px 和margin to...