空白外邊距互相疊加
系統
1654 0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style>
body{width:300px; font-family:'微軟雅黑'; font-size:1em; text-indent:10px; line-height:1.25}
div{background:#a40000;margin:10px;
}
div p{background:#eee;margin:15px}
</style>
</head>
<body>
<div><p>空白邊距疊加
demo</p></div
>
</body>
</html>
這是一個div元素內嵌套p的簡單樣例，看上面的代碼會以為是這樣的效果
在瀏覽器中打開.你會驚訝的發現,它呈現給你的效果是這樣的:
解決方法：
一、
為外圍元素定義透明邊框.具體到本例,即在樣式div中加入
border:1px solid transparent
;注：在IE6里面會產生黑色邊框。
二、為外圍元素定義內邊距填充..具體到本例,即在樣式div中加入
padding:1px
三、用到清除浮動：
具體到本例,即在樣式div中加入zoom:1; overflow:hidden;
?
?
由于編輯器無法很好的上傳圖片下面附件為兩個效果圖
空白外邊距互相疊加
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元