CSS学习笔记——外边距坍塌
来源:互联网 发布:淘宝上怎样删除评价 编辑:程序博客网 时间:2024/04/29 19:35
1.坍塌发生的情况
外边距坍塌(margin collapsing)是指两个元素紧挨着时,两个外边距会缩小到一个外边距,这个词在《精通CSS》(第2版)这本书中也被称为“外边距叠加”。这个现象只会发生在Normal flow布局中,不会发生在绝对定位布局和浮动布局。(详情可参看CSS学习笔记——布局)
1.1 两个块级元素上下布局时发生坍塌
上下两个元素外边距接壤时,下面的元素会上移。他们之间的距离(边框到边框)会坍塌到一个外边距x,这个外边距x是两个外边距的较大值。
下面看一个实例
//index.html html5中head body标签可以省略<div class="test1">Class test1</div><div class="test2">Class test2</div><link rel="stylesheet" type="text/css" href="test.css">//test.css.test1{ color: red; background-color: black; margin: 10px; padding: 5px; border: 10px solid;}.test2{ color: blue; margin: 20px; padding: 10px; border: 10px solid;}
橙色的是chrome浏览器指示工具,指示了test2元素的外边距是20px,刚好到达test1元素的边框。test1元素的10px外边距坍塌消失。
backgroud-color显示的区域由内边距padding决定。外边距margin无颜色设置。
1.2 父子元素坍塌
如果父元素没有内边距和边框,即父子元素之间没有缓冲的东西阻挡一下,那么子元素的外边距就会坍塌。在下面例子中,两处css都注释掉,会出现上面那张图;如果放开任一个注释,那么就会出现中间那张图;如果父元素有上内边距没有下内边距,那么就会出现不对称坍塌的情况,上面不坍塌,下面坍塌,正如下面那张图。
//index.html<div class="test1">Class test1</div><div class="test2">Class test2</div><link rel="stylesheet" type="text/css" href="test.css">.test1{ color: red; background-color: grey; margin: 10px; /*padding: 1px;*/ /*border: 1px solid;*/}.test2{ color: blue; margin: 20px; background-color: black;}
2.自身不会坍塌
在《精通CSS》(第二版)的第42页中,文中说空元素(无内容、边框、内边距)会自身坍塌,但经过试验,发现空div元素不会自身坍塌。
3.坍塌作用
外边距坍塌这个现象很奇怪,为什么会有这么一个隐含的潜规则呢,《精通CSS》中给出了一个应用场景:在文章中,如果没有外边距坍塌作用,那么第一段的上边距会显得跟其他段落间距不一致。
【Reference】
1. 《精通CSS》(第2版)
0 0
- CSS学习笔记——外边距坍塌
- CSS外边距合并/重叠-学习笔记
- CSS学习笔记8-内边距、边框和外边距
- CSS学习笔记:内边距、边框和外边距
- 《CSS权威指南》学习记录——内边距、边框、外边距
- CSS学习笔记:布局(内外边距与漂浮)与定位
- CSS外边距合并
- css外边距合并
- CSS 外边距合并
- CSS 外边距 margin
- CSS外边距合并
- CSS 外边距合并
- css 内外边距
- CSS外边距叠加
- CSS外边距合并
- CSS 外边距合并
- Css外边距合并
- CSS外边距合并
- python基础—面向对象
- SQL Server 网络接口,error:25-连接字符串无效的解决方法
- Ubuntu16.04 +cuda8.0+cudnn+opencv3.1.0+tensorflow+torch配置明细
- linux_ext文件系统原理基础
- 第五章 SQLite 数据库
- CSS学习笔记——外边距坍塌
- 常用学习网站
- 全面解析DDN存储和HPC解决方案
- Android基础—XML数据解析的三种方式
- python基础—文件 | json序列化
- 安装maven工具
- json和jsonp和ajax的实质和区别
- 吉林国际商品交易中心邮币卡骗局
- 参考MSDN的checked用法(C# 参考)