<!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;
由于编辑器无法很好的上传图片下面附件为两个效果图
扫一扫
2493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
