Css 外边距折叠(collapsed margin ) 浅析
Css 外边距折叠(collapses margin )
a.先来看看w3c 文档对于外边距折叠的定义：
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
翻译一下：在Css中，相邻盒子(有可能是同辈元素，也可能不是)的外边距可以合并成为一个外边距。 外边距的这种合并方式称为 折叠，这种合并过的外边距称为 外边距折叠。
举个例子：
<style type="text/css">
.testBFC{
width:100px;
height:100px;
background-color:green;
}
.testBFC div{
width:30px;
height:30px;
background-color:pink;
}
.testBFC div:first-child{
margin-bottom:10px;
}
.testBFC div:last-child{
margin-top:10px;
}
</style>
<div class="testBFC">
<div>div1</div>
<div>div2</div>
</div>
运行结果如下图。从图中我们可以看出来，div1 的margin-bottom和 div2 的margin-top 合并了，结果 div1和div2 之间只有10px。我们本来是要他们之间间隔20px，如何实现呢？可以给div1 的class中添加：display：inline-block。 这就涉及到如何解决或避免外边距折叠的问题了。
下面来看看w3c文档的具体注意事项:
Note the above rules imply that:
- Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
- Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
- Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).
- Margins of inline-block boxes do not collapse (not even with their in-flow children).
- The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.
- The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.
- The bottom margin of an in-flow block box with a 'height' of 'auto' and a 'min-height' of zero collapses with its last in-flow block-level child's bottom margin if the box has no bottom padding and no bottom border and the child's bottom margin does not collapse with a top margin that has clearance.
- A box's own margins collapse if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins (if any) collapse.
1. 浮动的盒子和其它盒子之间不会发生折叠。(甚至 浮动的盒子和它的正常流中子元素之间 也不会 发生折叠). 举个例子，下面例子中 父元素 和子元素 之间 会发生外边缘折叠，这时可以父元素或子元素 设置成浮动，就可以显示正常。
<head>
<style type="text/css">
*{
margin:0;
padding:0;
}
.testBFC{
width:100px;
height:100px;
background-color:green;
margin-top:10px;
}
.testBFC div{
width:30px;
height:30px;
background-color:pink;
}
.testBFC div:first-child{
margin-top:10px;
}
</style>
</head>
<body>
<div class="testBFC">
<div>div1</div>
</div>
</body>
2. 为元素的建立一个新的 bfc(块级格式上下文),这样就不会和 它的正常流中的子元素发生折叠。如上面的例子中，可以在外面的div 添加一个属性overflow:hidden
3. 绝对(absolute)定位的盒子不会发生折叠,包括和它们的子元素之间。上面的例子中，可以给父元素或者子元素 添加属性：position:absolute
4.inline-block盒子不会发生外边距折叠，包括和它们的子元素之间。
可能发生外边距折叠的场景：
5. 在一个正常的文档流中，块级元素的bottom margin 会和它的后面的兄弟元素的 top margin发生折叠，除非 你设置了 clearance。见文章顶部的例子。
6. 块级元素的 top margin 会和它的第一个块级元素的子元素的 top margin 发生外边距折叠，如果这个块级元素没有设置 top border, no top padding ,子元素没有设clearance. 举例：tip 1 中已经有了这个例子。
7. 块级元素的bottom margin 有可能会和它的最后一个块级子元素的 bottom margin 发生外边距折叠，如果 这个块级元素没有设置 bottom padding，bottom border 并且 height:auto, min-height:0
8. 一个盒子自己也有可能会外边距折叠 ， 如果min-height:0, 并且没有设置 top/bottom borders 或者 top/bottom padding， 并且height:0/auto 并且它不包含 line box 并且 它所有的in-flow子元素也会外边距折叠。
详细信息请参考w3c文档: http://www.w3.org/TR/CSS2/box.html#collapsing-margins
Css 外边距折叠(collapsed margin ) 浅析的更多相关文章
- CSS外边距margin上下元素重叠
CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...
- CSS之外边距折叠
外边距折叠 Collapsing margins,即外边距折叠,指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距. 其中所说的 margin 毗邻,可以归结为以下两点: 这两个或多个 ...
- CSS外边距合并的几种情况
CSS外边距合并的几种情况 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width ...
- CSS外边距叠加问题
CSS外边距叠加就是margin-collapse,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,水平边 距永远不会重合.重叠结果计算规则:①.两个相邻的外边距都是正数时,折叠结果是它 ...
- CSS 外边距
CSS 外边距围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”. 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. ##### ...
- 【21】外边距折叠(collapsing margins)
[21]外边距折叠(collapsing margins) 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. [注意]m ...
- CSS外边距合并（塌陷/margin越界）
原文 简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5. ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- CSS外边距属性，深入理解margin
margin See the Pen margin by wmui (@wmui) on CodePen. 该属性用于设置元素的外边距,外边距是透明的,默认值0.这是一个简写属性,属性值最多为4个,例 ...
随机推荐
- 利用 Windows Azure 实现“云优先”
根据 IDC 的调查,云计算无疑为我们的合作伙伴提供了巨大的机会,预计到 2016 年,全球企业将在公共云服务上耗资 980 亿美元.在今天的休斯敦全球合作伙伴大会上,我们非常高兴能与合作伙伴共同寻求 ...
- Android UI SurfaceView的使用-绘制单个图型或多个图形
新建MyView类继承自SurfaceView: public class MyView extends SurfaceView implements SurfaceHolder.Callback { ...
- 【JavaScript脚本编程技术详解-----（一）】
首先说明,本系列教程是写给有一定的JavaScript编程基础的同学看的,最好还有其它的编程语言经验,因为里面可能涉及一些其它的程序设计语言写的源代码,这都是我自己总结的经验,我喜欢在学习一门新的编程 ...
- 9款极具创意的HTML5/CSS3进度条动画（免积分下载）
尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detai ...
- sqlserver数据库差异比较
相信这个功能会对好多网友有帮助,不得不说vs的功能很强大,废话不多说,切入正题 我们可以使用 vs自带的工具比较两个数据库的架构差异和数据差异,这篇文章只是写了架构的差异,我相信看完以后, 如何进行数 ...
- 谈谈css3的字体大小单位[rem]
最近接收了一份面试题,内容是移动端传播的H5(在中国通常这么叫)广告页. 秉承移动端web尽量少用px的概念,我使用rem进行了一次重构.对于rem,基本是给 html/body 元素定义一个字体大小 ...
- @Html.ValidationSummary()的使用
@Html.ValidationSummary()用于返回表单在后台验证的结果. 如, 当后台if (ModelState.IsValid)失败后,错误信息就会显示到 @Html.Validation ...
- 【整理】SQLServer查询各种数据库对象（表，索引，视图，图表，存储过程等）
首先明确数据库对象的定义:数据库对象定义数据库内容的结构.它们包含在数据库项目中,数据库项目还可以包含数据生成计划和脚本. 常见的数据库对象包括:表,索引,视图,图表,缺省值,规则,触发器,存储过程, ...
- Properties文件的XML格式(转)
想必大家都用过*.properties文件,作为配置文件.但是,如果该文件写入了中文,待编译后内容就会成为乱码,使用native命令也好.使用ant执行编码转换也好,多少有点麻烦,与其如此,我们不如直 ...
- javascript新窗口打开链接window.open()被阻拦的解决办法
场景是ajax提交,比较后端效验数据,需要用户登录,提示后并需要新窗口打开登录的链接,使用window.open(url);往往会被浏览器认为是广告而被拦截. data.url是ajax返回的链接地址 ...