css特性:空白外边距互相叠加
来源：Mr.Think 发布时间：2010-06-21 10:53:00
空白双边距是一个极容易误解的CSS特性.它不是CSS的bug,但如果我们一旦误解,将会给你带来很多麻烦.
先看如下demo代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>空白边距叠加demo@Mr.Think</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@Mr.Think</p></div>
</body>
</html>
这是一个div元素内嵌套p的简单样例,先别复制保存为html测试,在你看完上面的代码后,你是否以为它出为你呈现如下图的效果?
好,现在你可以复制上面代码,保存到本地,然后在浏览器中打开.你会惊讶的发现,它呈现给你的效果是这样的:
为什么会这样呢?按CSS中,对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离.故,子元素的顶部和底部空白边就突出到元素的外围了.p元素的15px外边距与div元素的10px的外边距形成一个单一的15px垂直空白边,另外,形式的这个空白边并非为div所包围,而是呈现在div的外围.所以,我们看到了第二张效果图.
如何解决?本人比较推荐两种解决方式:
其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid transprent;
其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px
另外,还可以通过外围元素绝对定位,或者定义子元素浮动等方式实现.
0
投稿猜你喜欢
- 最近论坛里总有人问幻灯片怎么从数据库里取数据，花了几分钟简单的写了下。用到的人可以自己在细化<％dim rs,sqlset&
- 内容摘要：本文是一篇实例讲解的文章。作为一个普通的程序员，我深知，一个优秀的例程，对于正在学习编程的人是多么的有帮助。本文中使用的例程，是一
之前写过的组织结构和组织体系都太抽象了，读到标签系统我才有那种“略懂”的感觉。哈哈…书上提到的标签包括：导航情境式链接：常见的“更多”这种用- 全文索引在 MySQL 中是一个 FULLTEXT 类型索引。FULLTEXT 索引用于 MyISAM 表，可以在 CREATE TABLE
- 这里使用FSO对象来删除指定文件夹 代码和说明如下：<％ set fs=createobject(&qu
- 也许是这样的。下面我们来推荐一个简单的分页程序，代码和说明见下（两段虚线“-----”间的代码是实现该功能的重要语句）：chunfeng.a
- 本文介绍了asp编程中使用数组的各种方法，并给出了详细的asp实例代码方便大家理解。asp中数组的定义Dim MyArray My
- 核心导出作业的 代码 和 作业备份是相似的 代码如下:alter PROC DumpJob (@job VARCHAR(100)
- ASP结合ADO对数据库方便快捷的访问、结合XML、COM/ActiveX等其它技术 实现服务器多层结构的功能使它在今天还有着顽强的生命力。
- Opera, 作为 A-Grade 浏览器，在现在的前端开发中务必支持。它很优秀，很不幸，bug是每个浏览器都不可避免的问题，Opera亦难
- “重构”的春风吹遍大江南北，互联网一时间风声鹤唳，“div+CSS”俨然已成为一种“时尚”，难以尽数的网站都不约而同地开始了自己的“重构”。
- 下面是asp代码实现列出sql数据库中存储过程的功能，可自行添加其它功能：< HTML ><
- 整个重装步骤大致分四个步骤进行，第一步，备份原mysql中的所有数据库。第二步，完全卸载mysql第三步，下载安装新版mysql第四步，导入
- ---- Oracle是关系型数据库管理系统，它功能强大、性能卓越，在当今大型数据库管理系统中占有重要地位。在我们开发的一MIS
- 具体用法：1、<％= Counters.Get(CounterName) ％>显示计数器的值。2、<％ counterva
- 来蓝色一直都在潜水,很少写帖子,太对不起大家了.下面和大家探讨一个话题,希望能引起大家的兴趣.关于H1,一直都想和大家讨论H1用法的问题,可
- 使用数据库的过程中，由于断电或其他原因,有可能导致数据库出现一些小错误，比如检索某些表特别慢,查询不到符合条件的数据等。出现这些情况的原因,
- 以XML格式查看查询结果通过使用传统—xml 选项调用MySQL命令行客户程序，你可以以XML格式(而不是传统的列表形式
- 用XMLHTTP Post Form时的表单乱码有两方面的原因——Post表单数据时中文乱码；服务器Response被XMLHTTP不正确编
- 今天做自定义的404页面，需要垂直水平居中，垂直居中不像水平居中那么简单，呵呵。这种效果会在企业站首页，或一些提示性页面经常用到，今天做了个
