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. Codeforces 339E

    #include <cstdio> #include <algorithm> #include <cmath> #include <cstring> # ...

  2. linux学习之（五）-linux文解压、压缩、安装

    查看一个文件的类型 命令:  file  文件名 创建一个.tar类型的压缩包使用命令:tar -cvf    [文件名].tar  目录   例:tar -cvf   a.tar    yasuo/ ...

  3. 支付宝“订单交易失败 ALI64” 报错的原因

    移动快捷支付,往往需要集成支付宝的sdk,集成的过程相对简单,只要按照支付宝的文档,进行操作一般不会出问题. 下面主要说明一下,集成sdk后报 "订单交易失败 请稍后再试(ALI64)&qu ...

  4. 当PullToRefreshScrollView里面嵌套ListView

    当PullToRefreshScrollView里面嵌套ListView,ListView上面还是有内容的,当下拉刷新的 时候,数据填充完成之后ListView就会往上面滑动,导致ListView上面 ...

  5. Apache经常使用配置

      Apache採用IBM HTTPServer,内核为Apache/2.0.47 Server version: IBM_HTTP_Server/6.1.0.13 Apache/2.0.47   查 ...

  6. Fix The thread xxx has exited with code 259 (0×103)

    When run the test case in VS2013, you may encounter below problem After test case end, it will show ...

  7. SQL常用函数

    SQL中常用的函数有类型转换函数.字符串函数和日期使用函数.更多具体的函数用法参见DBMS中的帮助文档. 类型转换函数 cast(值 as 类型) update 表名 set 列1=列1+cast(列 ...

  8. DOM元素对象的属性和方法（1）

    一.accessKey() 作用:获取元素焦点快捷键:设置快捷键后,使用Alt+快捷键,让元素快速获得焦点, <!DOCTYPE html> <html> <head&g ...

  9. My SQL和LINQ 实现ROW_NUMBER() OVER以及Fatal error encountered during command execution

    Oracle 和SQL server都有ROW_NUMBER() OVER这个功能函数,主要用于分组排序,而MySQL 却没有 SELECT * FROM (SELECT ROW_NUMBER() O ...

  10. Arduino周边模块：执行部件(舵机、直流电机、步进电机)

    Arduino周边模块:执行部件 Arduino周边模块:执行部件 嵌入式系统的构成 如今已经有各种各样的基于Arduino的嵌入式系统, 比如:智能小车.3D打印机.机器人,甚至还有基于Arduin ...