由父子元素margin说开——外边距塌陷（margin-collapse）

最新推荐文章于 2024-07-16 10:51:54 发布

菽粟吃栗子

最新推荐文章于 2024-07-16 10:51:54 发布

阅读量7.9k

点赞数 5

分类专栏： css 布局文章标签： margin 布局

本文链接：https://blog.csdn.net/sinat_22996989/article/details/47255541

版权

css 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

布局

3 篇文章 0 订阅

订阅专栏

布局时往往要遇到div嵌套显示效果，如下：

假设蓝色的为div1，黄色的为div2，为了实现上图所示布局，我的想法是为demo1设置margin:0px auto; demo2位置margin:30px,auto;

代码如下：

<span style="font-size:14px;"><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		body{
			background-color: darkgray;
		}
		*{
			margin:0px;
			padding: 0px;
		}
		.div1{
			width:800px;
			height: 200px;
			background-color: cornflowerblue;
			margin:0px auto;
		}
		.div2{
			width:80%;
			height: 10%;
			background-color: wheat;
			margin: 30px auto;
		}
		</style>
	</head>

	<body>
      <div class="div1">
      	 <div class="div2">     	 	
      	 </div>
      </div>
	</body>

</html></span>

然而在浏览器里的结果显示如下：

div1随着div2往下走了30px，而div2相对div1的位置却没有变，这是为什么呢？

看上去父子元素的margin-top合并了。流内块级元素的top与bottom外边距有时会合并（塌陷）为单个外边距（合并后最大的外边距），这样的现象称之为外边距塌陷（margin collapsing）

塌陷只存在与相邻的垂直外边距，即只涉及到margin-top/bottom，水平（margin-left/rignt无）

以下三种情况会出现外边距塌陷：

1. 毗邻兄弟元素之间：

若两者都为正外边距以最大的外边距为准；
若存在负边距，合并后的外边距为最大正外边距减去绝对值最大的负边距；
若无正外边距，则用0减去绝对值最大负边距。

2. 父元素与第一个/最后一个子元素之间

如果块元素的 margin-top 与它的第一个子元素的margin-top 之间没有 border、padding、inline content、 clearance 来分隔，或者块元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有 border、padding、inline content、height、min-height、 max-height 分隔，那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截断。

margin-top:

https://jsfiddle.net/nekoloke/jy3mt4ku/

父元素无 border、padding、inline content（例子中::before伪元素为绝对定位脱离正常流，所以不算inline content）、 clearance，父子元素的margin-top塌陷，此时子元素margin-top:30px，使得父子元素同时移动。

margin-bottom:

https://jsfiddle.net/nekoloke/d0ugjoum/

若给父元素添加height，且height不能为auto,只能为绝对数值或者百分比(margin-top不受height影响)，则塌陷效果被消除。

若给父元素添加min-height,则父元素底部外边距依然受子元素影响，需通过border/padding/inline content/overflow消除。

https://jsfiddle.net/nekoloke/b8shusxq/

3. 自身合并

 
 一个盒的top和bottom margin，该盒没有建立一个新的块格式化上下文并且'min-height'的计算值为0，'height'的计算值为0或者'auto'，并且没有流内子级
  

官方文档Note：

 
  - 一个浮动的盒与任何其它盒之间的margin不会合并（甚至一个浮动盒与它的流内子级之间也不会） 
 
  - 建立了新的块格式化上下文的元素（例如，浮动盒与'overflow'不为'visible'的元素）的margin不会与它们的流内子级合并 
 
  - 绝对定位的盒的margin不会合并（甚至与它们的流内子级也不会） 
 
  - 内联盒的margin不会合并（甚至与它们的流内子级也不会） 
 
  - 一个流内块级元素的bottom margin总会与它的下一个流内块级兄弟的top margin合并，除非兄弟有空隙 
 
  - 一个流内块级元素的top margin会与它的第一个流内块级子级的top margin合并，如果该元素没有top border，没有top padding并且该子级没有空隙 
 
  - 一个'height'为'auto'并且'min-height'为0的流内块级盒的bottom margin会与它的最后一个流内块级子级的bottom margin合并，如果该盒没有bottom padding并且没有bottom border并且子级的bottom margin不与有空隙的top margin合并 
 
  - 盒自身的margin也会合并，如果'min-height'属性为0，并且既没有top或者bottom border也没有top或者bottom padding，并且其'height'为0或者'auto'，并且不含行盒，并且其所有流内子级的margin（如果有的话）都合并了