圖1-2
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這里發(fā)生了兩個情況。首先，段落的20像素上邊界和上邊界與div的10像素邊界疊加，形成一個單一的20像素垂直邊界。其次，這些邊界不是被DIV包圍，而是突出到DIV的頂部和底部的外邊。出現(xiàn)這種情況是由于具有塊級子元素的元素計算其高度方式造成的。
如果元素沒有垂直邊框和填充，那么它的高度就是它包含的子元素的頂部和底部邊框邊緣之間的距離。因此，包含的子元素的頂部和底部空白邊就突出到容器元素的外邊。但是，有一個簡單的解決方案。通過添加一個垂直邊框或填充，空白邊就不再疊了，而且元素的高度就是它包含的子元素的頂部和底部空白邊邊緣之間的距離。
為了讓前面的示例看起來像圖1-1這樣，只需在div周圍添加補白或邊框：
復制代碼 代碼如下:
#box{
margin:10px;
padding:1px;/*或者border:1px solid color;*/
background-color:#d5d5d5;
}
p{
margin:20px;
background-color:#6699ff;
}
邊l界疊加的大多數(shù)問題可以通過添加透明邊框或1px的補白來修復。
補充解決方案：
復制代碼 代碼如下:
1.外層 padding
2.透明邊框 border:1px solid transparent;
3.絕對定位 postion:absolute:
4.外層DIV overflow:hidden;
5.內層DIV 加float:left; display:inline;
6.外層DIV有時會用到zoom:1;
