CSS3 margin（二十一）

---

原文：深入理解CSS中的margin负值
原文：理解CSS外边距margin
一.重叠
margin重叠又叫margin合并，发生这种情况有两个前提

1. 只发生在block元素上面(不包括float、absolute、inline-block元素)
2. 只发生在垂直方向上(不考虑writing-mode)

会发生margin重叠的三种情况：

1.相邻的兄弟元素

<style>
	p{
		line-height: 2em;
		margin:1em 0;
		background-color: lightblue;
		display:inline-block;
		width: 100%;
	}
</style>
<p>兄弟一</p>
<p>兄弟二</p>

2.父元素和第一个或最后一个子元素，父子级的margin重叠又叫margin传递

<style>
	.box{
	    background-color: pink;
	    height:30px;
	}
	.inner{
	    margin-top: 1em;
	    background-color: lightblue;
	}
</style>
<div class="box">
    <div class="inner">子级</div>
</div>

相比相邻兄弟元素margin重叠来说，父子级margin重叠需要满足以下几个条件(以margin-top重叠为例)

• 父元素不是BFC元素
• 父元素没有padding-top值
• 父元素没有border-top值
• 父元素和第一个子元素之间没有inline元素分隔

如果父子级的margin-bottom重叠，第四条改为父元素和最后一个子元素之间没有inline元素分隔，以及还需满足父元素没有height、min-height、max-height

3.空的block元素

<style>
	.box{
		background-color: lightgreen;
		overflow: hidden;
	}   
	.void{
		margin: 1em 0;
	}
</style>
<div class="box">
    <div class="void"></div>
</div>

上述代码运行从结果父元素的高度只有1em而非2em

同样的，空block元素发生margin重叠也需要满足一些条件

• 元素没有border值
• 元素没有padding值
• 里面没有inline元素
• 没有height或min-height

规则：

• 两个正垂直外边距，浏览器取大值
• 两个负垂直外边距，浏览器会取绝对值的最大值
• 一正一负，会从正外边距减去这个(负外边距的绝对值)

新属性(Chrome和Safari支持)
-webkit-margin-collapse，有三个值

值	描述
collapse	默认重叠
discard	取消
separate	分隔

该属性用于设置margin属性是否重叠，作用与发生margin重叠的两个元素之一。如果，两个都使用给属性，一个设置为discard，一个设置为separate，则最终效果为重叠collase

表现：

• block元素可以使用四个方向的margin值
• inline元素使用上下方向的margin值无效
• inline-block使用上下方向的margin负值看上去无效

注：inline-block使用上下方向的margin负值只是看上去无效，这与其默认的vertical-align:baseline有关，当垂直对齐的属性值为其他值时，则会显示不同的视觉效果

重叠
margin负值并不是总是后面元素覆盖前面元素，它与元素display属性有关系

• 两个block元素重叠时，后面元素可以覆盖前面元素的背景，但无法覆盖其内容。
• 当两个inline元素，或两个line-block元素，或inline与inline-block元素重叠时，后面元素可以覆盖前面元素的背景和内容
• 当inline元素(或inline-block元素)与block元素重叠时，inline元素(或inline-block)覆盖block元素的背景，而内容的话，后面的元素覆盖前面的元素

在普通流布局中，浏览器将页面分为内容和背景，内容的层叠显示始终高于背景。block元素分为内容和背景，而inline元素或inline-block元素，其本身就是内容(包括其背景等样式设置)

浮动

• block元素与浮动元素重叠时，其边框和背景在该浮动元素之下显示，而内容在浮动元素之上显示
• inline或inline-block元素与浮动元素重叠时，其边框、背景和内容都在该浮动元素之上显示

定位

• 定位元素(position不为static)覆盖其他元素的背景和内容
• 将relative属性值应用于inline元素，由于无法改变其行内元素的本质，所以其上下margin依然存在问题