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. structs常用的Action

    今天座右铭-----谦虚使人进步,骄傲使人落后. 除了基本的Action之外,structs还提供几个其他的类型Action,下面就简单的说一下: 1.DispatchAction:能同时完成多个Ac ...

  2. wx

    wx The classes in this module are the most commonly used classes for wxPython, which is why they hav ...

  3. 为SharePoint 2010中的FBA创建自定义登录页面

    SharePoint 2010中默认的FBA登录页面非常简单,只提供了一个Asp.Net的Login控件,让用户输入用户名和密码.在大多数情况下,我们需要定制这个页面以满足一些安全需求,比如为登录页面 ...

  4. ABCpdf.NET中Rect，Bottom，Height的关系

    因为项目需要新功能,要在一个图片的上下加上固定高度的白边如下图.项目中一直使用ABCpdf.NET处理图片,但我一直没有做这方面的功能,所以找来API参考做. 这个简单需求做的过程中出现了一些曲折,主 ...

  5. ORACLE函数TO_CHAR以及数字转换格式[Z]

    本来这是很简单的函数,但在屡次忘记格式之后,决定还是翻译一遍以铭记在心.      参考<<Oracle Database SQL Reference>>.      关于nl ...

  6. iOS通知NSNotificationCenter

    NSNotificationCenter消息通信 作用:NSNotificationCenter是专门供程序中不同类间的消息通信而设置的. 注册通知:即要在什么地方接受消息 [[NSNotificat ...

  7. hdu3516

    题目大意:这个....翻译起来还真是不好说,各位四六没过的ACMer正好去原网页看看题意,过了的好孩子还是去看看原网页看看锻炼一下吧.(当然我做这道题目的时候,教练已经摆明说要用四边形不等式,所以还是 ...

  8. JavaWeb核心编程之(三.2)Servlet配置

    Servlet配置 1.配置Serlvet加载时机 2.配置多映射 配置加载时机 新建项目config->创建包com.xiaoan.config->创建类FirstServlet imp ...

  9. hadoop笔记之MapReduce的运行流程

    MapReduce的运行流程 MapReduce的运行流程 基本概念: Job&Task:要完成一个作业(Job),就要分成很多个Task,Task又分为MapTask和ReduceTask ...

  10. CSS3弹性盒模型布局模块

    原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-introduction-and-d ...