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 ) 浅析的更多相关文章

  1. CSS外边距margin上下元素重叠

    CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...

  2. CSS之外边距折叠

    外边距折叠 Collapsing margins,即外边距折叠,指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距. 其中所说的 margin 毗邻,可以归结为以下两点: 这两个或多个 ...

  3. CSS外边距合并的几种情况

    CSS外边距合并的几种情况 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width ...

  4. CSS外边距叠加问题

    CSS外边距叠加就是margin-collapse,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,水平边 距永远不会重合.重叠结果计算规则:①.两个相邻的外边距都是正数时,折叠结果是它 ...

  5. CSS 外边距

    CSS 外边距围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”. 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. ##### ...

  6. 【21】外边距折叠(collapsing margins)

    [21]外边距折叠(collapsing margins) 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. [注意]m ...

  7. CSS外边距合并（塌陷/margin越界）

    原文 简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5. ...

  8. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  9. CSS外边距属性，深入理解margin

    margin See the Pen margin by wmui (@wmui) on CodePen. 该属性用于设置元素的外边距,外边距是透明的,默认值0.这是一个简写属性,属性值最多为4个,例 ...

随机推荐

  1. docker 指定容器名字

    docker:/root# docker run -itd --name linux123 ubuntu /bin/bash Unable to find image 'ubuntu:latest' ...

  2. CC++初学者编程教程(8) VS2013配置编程助手与QT

    1. 2. 配置编程助手 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19． 20. 21. 22. 23. 24. 25. 26 ...

  3. hdu 4740

    题目链接 老虎左拐,老鼠右拐,碰到不能走的拐一次,如果还不能走就停下,自己走过的不能走,求相遇的坐标或-1 一个停下之后,另一个还可以走 #include <cstdio> #includ ...

  4. docker制作node程序镜像：

    准备: 需要5个文件 新建一个docker文件夹 1 .ignore git忽略文件用的 2 pakage.json 安装NODE程序的 也可以直接拷贝进 docker文件加 3 node环境 lin ...

  5. GDI编程小结

    图形设备接口(GDI)是一个可运行程序,它接受Windows应用程序的画图请求(表现为GDI函数调用),并将它们传给对应的设备驱动程序,完毕特定于硬件的输出,象打印机输出和屏幕输出.GDI负责Wind ...

  6. IOS 8弃用api

    IOS 8弃用api 下面api是弃用: 的 UIApplication 方法和属性注冊通知. 使用新的API. 的 uiviewcontroller 面向接口的方法和属性. 中描写叙述的特征和大小类 ...

  7. Acess错误："文件共享锁定数溢出"

    对于ACCESS数据库,如果通过大量的SQL来操作数据库或者直接操作大量的数据时,经常会出现这种错误: "文件共享锁定数溢出" 原因如下:     Access数据库,同时操作大量 ...

  8. javascript高级知识分析——函数访问

    代码信息来自于http://ejohn.org/apps/learn/. 可以通过函数的名字在它的内部引用它. function yell(n){ return n > 0 ? yell(n-1 ...

  9. java 线程之间通信以及notify与notifyAll区别。

    jvm多个线程间的通信是通过 线程的锁.条件语句.以及wait().notify()/notifyAll组成. 下面来实现一个启用多个线程来循环的输出两个不同的语句. package com.app. ...

  10. Spring-----Spring整合Struts2实例

    转载自:http://blog.csdn.net/hekewangzi/article/details/51713058