空白外边距互相叠加
系统
1363 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元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。
【本文对您有帮助就好】元