`
lexis
  • 浏览: 4853 次
  • 性别: Icon_minigender_2
  • 来自: 厦门
最近访客 更多访客>>
社区版块
存档分类
最新评论

空白外边距互相叠加

XHTML浏览器HTML 
阅读更多

<!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;

 

 

由于编辑器无法很好的上传图片下面附件为两个效果图

  • 大小: 32.7 KB
  • 大小: 20.2 KB
分享到：
| wap
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics