前端 - css大div里面放小div，小div设置margin-top属性，为什么大div也飘起来了，有图

Question

css

Answer 1

父容器和子容器的margin-top合併了

http://www.w3school.com.cn/css/css_margin_collapsing.asp

Answer 2

因為CSS中存在一個margin collapse，即邊界塌陷或說邊界重疊。對於上下兩個並列的p塊而言，上面p的margin-bottom和下面p的margin-top會塌陷，也就是會取上下兩者margin裡最大值作為顯示值，所以從這個意義上說：CSS及瀏覽器的設計者們希望我們在佈局時，如果遇到上下兩個並排內容塊的安排，最好只設置其中每個塊上或下margin的一處即可。

但對於父塊p內含子塊p的情況，就會按另一條CSS慣例來解釋了，那就是：對於有塊級子元素的元素計算高度的方式,如果元素沒有垂直邊框和填充,那其高度就是其子元素頂部和底部邊框邊緣之間的距離。所以對於程式碼：

點擊(此處)折疊或打開

father這個p的高度為0，因為裡面沒有能夠撐開p的內容。如果變成：

點擊(此處)折疊或打開

I am here.

則高度就是文字的高度，因為此時文字在撐著這個p。
話說回來，一個p和它的子p特別重視垂直邊框或填充，也就好像是，一口鍋，裡面放個盆，能不能扣住裡面的盆，主要看鍋蓋了，垂直邊框或填充物就是這個「鍋蓋」。於是解決的方式至少有以下兩種：

結論：
解決父子p中頂部margin cllapse的問題，需要給父p設定：
1、邊框，當然可以設定邊框為透明;

點擊(此處)折疊或打開

border:1px solid transparent
或
border-top:1px solid transparent

2、為父p添加padding，或至少添加padding-top;
此外，還可以透過over-flow來解決，給父p寫入：

Answer 3

因為子元素的margin-top作用到父元素上了
解決方法有：
1.給父層加法：overflow:hidden;
2.給父層加：border除none以外的屬性
3.為父層新增：padding-top取代margin-top的效果。

Answer 4

典型的css問題。
外邊距合併，出現狀況題主已經說了，解決方案是父容器加 overflow

Answer 5

margin不管子元素還是父元素，只要其中有一個margin-top，父元素會繼承子元素的，都會撐開的，用overflow:hidden給父元素就可以解決，或者子元素裡面用padding去填充，但是要減去對應的填充數值。

Answer 6

區塊級正常流的高度問題：

這個問題的產生是由於子元素的margin值大於父元素的margin值。而區塊級正常流的margin會發生重疊。
區塊級元素的預設高度是由最高的外邊界到最低的外邊界，如果父元素margin大於子元素的margin值，就不會出現題主的那種情況。
但是！
如果父元素擁有上下padding或上下margin時，高度就會變成父元素的margin-top到margin-bottom。

所以要解決這個問題，只要給父級設定上下border或padding即可

Answer 7

父容器和子容器的margin-top合併了。
解決方法：
1.為父層新增：overflow:hidden;
2.為父層新增：border除none以外的屬性
3.為父層新增：padding-top代替margin-top的效果（建議）。

Answer 8

子容器的外邊距和父容器合併了。

Answer 9

1.外邊距合併。
2.可以使用padding代替margin實作。