块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，

这种行为称为外边距塌陷(margin collapsing)，有的地方翻译为外边距合并。

1.相邻的兄弟姐妹元素

毗邻的两个兄弟元素之间的外边距会塌陷（除非后者兄弟姐妹需要清除过去的浮动）。例如：

<p style="margin-bottom: 30px;">这个段落的下外边距被合并...</p>

<p style="margin-top: 20px;">...这个段落的上外边距被合并。</p> 

可以发现这两个段落中间的距离，不是 ”上面段落的下边距“ 与 ”下面段落的上边距“ 的 求和 ，而是两者中的较大者（在此示例中为30px）。

2.块级父元素与其第一个/最后一个子元素

如果块级父元素中，当上边框宽度（border-top）及上内边距距离（padding-top）为0时，那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。
此时这个块级父元素和其第一个子元素就会发生上外边距合并现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。
若第一个子元素为float或者position：absolute/fixed，则它脱离了普通文档流，不算第一个第一个子元素。

举一个例子

<style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        html {

            background: black;   //html为黑色背景

        }

        body {

            background: red;     //body为红色背景

        }

        #item {

            width: 200px;

            height: 200px;

            background: pink;    //粉色的一个块元素，设置了margin-top

            margin-top: 100px;

        }

    </style>

    <body>

        <div id="item"></div>

    </body>

运行结果：

发现结果好像不按套路，粉色部分item设置的margin-top却影响了他的父元素body。如下：                  理想结果：

                                 

此类出现情况：

1、父元素没有上边框
2、为第一个子元素设置上外边距时

解决方案：

1、为父元素增加上边框 border-top
弊端：父元素会变高
2、通过为父元素设置上内边距来取代子元素的上外边距 padding-top
弊端：也会增加父元素的高度
3、在父元素中首部增加一个空 <table>元素      （触发bfc）
弊端：页面中多一个空元素而已

4.父元素加一个：before伪元素 

body:before{
content:"";
display:table;
}

3.空块元素

如果存在一个空的块级元素，其 border、padding、inline content、height、min-height 都不存在。
那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。例如：

<p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p>

<div style="margin-top: 20px; margin-bottom: 20px;"></div>

<p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>

4.备注

当以上情形同时出现时，外边距合并会更加复杂（会比较两个以上外边距来最终计算出真实的边距值）。

即使外边距为0，这些规则也仍旧生效。因此，无论父元素的外边距是否为0，第一个或者最后一个子元素的外边距会被父元素的外边距"截断"(根据上面的规则)，在负外边距的情况下，合并后的外边距为最大正外边距与最小负外边距之和。

当有负边距存在时，合并后的外边距将是最大正边距加上最小负边距（即负边距中绝对值最大的一个）。

如两个兄弟元素，上面的元素的下边距为 20px ，下面的元素的上边距为 -20px ，那么发生外边距合并后，这两个元素的实际距离将变成 0px 。

BFC会阻止元素外边距合并。

(点击：深入理解BFC)

 

外边距塌陷 margin collapsing的更多相关文章

  1. CSS 基础 例子 盒子模型及外边距塌陷

    我们通常设置的宽度和高度,是指盒子模型中内容(content)的宽度和高度.元素的高度,还要加上上下padding和上下border,元素整个盒子的高度还要加上上下margin:宽度类似计算. 注意: ...

  2. 外边距塌陷之clearance

    在一个BFC中,垂直方向上相邻的块级盒子产生外边距塌陷,本文要说一个特殊的外边距塌陷情况,即当垂直方向上,两个块级盒子之间有个浮动元素相隔时,这个时候会产生什么样的效果呢? .outer{ overf ...

  3. css总结9：内边距（padding）和外边距（margin）

    1 css总结9:内边距和外边距 通过css总结8:盒子模型可知:内边距(padding),外边距(margin).可以影响盒子在浏览器的位置. 1.1 padding使用:{padding:上 右 ...

  4. css的外边距合并或者外边距塌陷问题

    第一种情况: 已知两个宽和高均为100px,margin均为20px的div垂直排列,现象如下图所示: 当设置css1的margin-bottom:40px:或者css2的margin-top:40p ...

  5. 深入理解BFC和外边距合并(Margin Collapse)

    一.什么是BFC? 1.BFC的概念 BFC全称Block Formatting Context ,直译“块级格式化上下文”,也有译作“块级格式化范围”.它是 W3C CSS 2.1 规范中的一个概念 ...

  6. CSS外边距合并&块格式上下文

    前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考 前言 之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为 ...

  7. “margin塌陷” 嵌套盒子外边距合并现象

    来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...

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

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

  9. margin属性以及垂直外边距重叠问题

       盒子的margin属性         盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置 ...

随机推荐

  1. python3字符串操作

    python3字符串操作 x = 'abc' y = 'defgh' print(x + y) #x+y print(x * ) #x*n print(x[]) #x[i] print(y[:-]) ...

  2. 注册Docker官网账号 注册按钮不能点

    出现如下问题:注册按钮不能点,解决办法,如下 关于docker hub上不能注册dockeID的问题 注意的是,google访问助手,用在线安装,360安全浏览器,再重启下该浏览器,省得装插件.

  3. 171. Excel表列序号

    题目:给定一个Excel表格中的列名称,返回其相应的列序号. 例如, A -> 1 B -> 2 C -> 3 ... Z -> 26 AA -> 27 AB -> ...

  4. VB.NET 定义多行文本字符的几种方式

    vbCrLf 在 .NET 刚刚推出的时候,VB作为一款被微软用来"衬托"C#的语言,在许多细节设计上远不如C#方便. 比如在C#中写一个多行文本,就有各种方式: string s ...

  5. 下单快发货慢：一个 JOIN SQL 引起 SqlClient 读取数据慢的奇特问题

    最近遇到一个非常奇特的问题,在一个 ASP.NET Core 项目中从 SQL Server 2008 R2 中查询获取 100 条记录竟然耗时 10 多秒,如果是查询本身慢,那到不是什么奇特的问题. ...

  6. Elastic-search在linux上的安装

    今天是我装第四次 ES ,之前装好用了一段时间,后面莫名其妙爆炸了,炸出一堆异常... 安装环境: JDK1.8   centos    ElasticSearch-6.2.4 jdk1.8以上,所以 ...

  7. eclipse——JDK安装与环境变量配置步骤

    第一次接触eclipse的时候,让我自己安装jdk和配置环境变量,我是懵逼的,后来百度到找到了一个比较详细的引导,本人测试没问题,截图按步骤如下: JDK安装   步骤1: 步骤2: 配置环境变量 步 ...

  8. Jmeter HTTP请求后响应数据显示乱码解决方法

    Jmeter请求后结果树里无论是text还是html响应数据显示乱码,这是因为jmeter 编码格式配置文件默认不开启导致的,解决方法如下: 1)进入jmeter-***\bin目录下,找到jmete ...

  9. ［转载］Apple Watch 开发详解

    Apple Watch 开发详解 Apple Watch现在对于第三方开发者来说更多的还是一块额外的屏幕.暂时WatchKit没有能给出足够的接口.现在Watch App的主要运算逻辑需要依赖iPho ...

  10. LeetCode--No.013 Roman to Integer

    13. Roman to Integer Total Accepted: 95998 Total Submissions: 234087 Difficulty: Easy Given a roman ...