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. JD-GUI on Ubuntu 13.04 64-bit

    Java Decompiler (jd-gui) is a cute little tool I like using when working in Java. Unfortunately it o ...

  2. hdu 3934 Summer holiday（凸包最大内接三角形）

    求n个点能组成的最大三角形,一发旋转卡壳模板题... #include<algorithm> #include<iostream> #include<cstring> ...

  3. git使用三把斧

    git status                                           -查看哪些更改 git add file1 file2                     ...

  4. Linux网络设备驱动架構學習（三）

    Linux网络设备驱动架構學習(三) 接下來會從以下幾個方面介紹網絡設備驅動的編寫流程: 1.網絡設備的註冊與註銷 2.網絡設備的初始化 3.網絡設備的打開與釋放 4.網絡數據發送流程 5.網絡數據接 ...

  5. jquery去除字符串首尾空格的方法：$.trim()

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. uva 193 Graph Coloring（图染色 dfs回溯）

    Description You are to write a program that tries to find an optimal coloring for a given graph. Col ...

  7. oracle10G之前介质下载地址【珍藏版】

    今天在互联网搜了一下相关介质下载,自己记录一下. Oracle9i Database Release 2 Enterprise/Standard/Personal Edition for Window ...

  8. Oracle 字符集问题

    1 简介 ORACLE数据库字符集,即Oracle全球化支持(Globalization Support),或即国家语言支持(NLS)其作用是用本国语言和格式来存储.处理和检索数据.利用全球化支持,O ...

  9. 《Oracle Applications DBA 基础》- 9 - Concurrent Processing[Z]

    <Oracle Applications DBA 基础>- 9 - Concurrent Processing================================== 参考资料 ...

  10. Maven 打包到Tomcat下

    1.在tomcat/conf下tomcat-users.xml 文件下添加 <role rolename="manager"/>      <user usern ...