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