今天周六要過來上班，閑來無事就又研究了一下css的問題，前一段時間去面試，被問到邊框塌陷的問題，我是一個小白，只是知道并沒有深入的去了解，今天在網上查了一下，自己也去敲了一遍，終于有所了解。下面是我寫的一個demo。

打開瀏覽器，我想有些小白肯定和我想的一樣，樣式呈現出來如下：

如果認為如上圖的話 那么你就錯了，其實是下面的樣子：

我一頭霧水的去查了一下，發(fā)現是邊框塌陷的問題，因為CSS中存在一個margin collapse，即邊界塌陷或者說邊界重疊。對于上下兩個并列的div塊而言，上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin里最大值作為顯示值，所以從這個意義上說：CSS及瀏覽器的設計者們希望我們在布局時，如果遇到上下兩個并排內容塊的安排，最好只設置其中每個塊上或下margin的一處即可。

但對于父塊DIV內含子塊DIV的情況，就會按另一條CSS慣例來解釋了，那就是：對于有塊級子元素的元素計算高度的方式,如果元素沒有垂直邊框和填充,那其高度就是其子元素頂部和底部邊框邊緣之間的距離。所以對于代碼：<div?class="father"></div>father這個div的高度為0，因為里面沒有能夠撐開div的內容。如果變?yōu)?#xff1a;?<div?class="father">I?am here.</div> 則高度就是文字的高度，因為此時文字在撐著這個DIV。

話說回來，一個DIV和它的子DIV特別重視垂直邊框或填充，也就好像是，一口鍋，里面放個盆，能不能扣住里面的盆，主要看鍋蓋了，垂直邊框或填充就是這個“鍋蓋”。于是解決的方式至少有以下兩種： ?結論： ??? 解決父子DIV中頂部margin cllapse的問題，需要給父div設置： ??? 1、邊框，當然可以設置邊框為透明border:1px?solid?transparent或border-top:1px?solid?transparent???
????2、為父DIV添加padding，或者至少添加padding-top; 此外，還可以通過over-flow來解決，給父DIV寫入：over-flow:hidden; 希望對某些小白有所幫助，也希望大佬多多指教。

總結

以上是生活随笔為你收集整理的边框塌陷的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。