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
投稿猜你喜欢
将图片读入到Dom中，并将其存为xml文件
mssql 大小写区分方法
golang 64位linux环境下编译出32位程序操作
VSCode提高 Node 和 Vue 开发效率的插件推荐
详解如何在nuxt中添加proxyTable代理
三步实现Django Paginator分页的方法
在Linux中通过Python脚本访问mdb数据库的方法
Python解析、提取url关键字的实例详解
python SVD压缩图像的实现代码
MySQL笔记之运算符使用详解
JavaScript自定义分页样式
go语言import报错处理图文详解
Python linecache.getline()读取文件中特定一行的脚本
Pyhton中单行和多行注释的使用方法及规范
聊聊Druid register mbean error的问题
MySQL REVOKE实现删除用户权限
PHP的mysqli_select_db()函数讲解
Python操作SQLite简明教程
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
PyTorch与PyTorch Geometric的安装过程
