CSS系列-7.CSS中的margin重叠

发表于 | 分类于

CSS系列-7.CSS中的margin重叠

margin重叠的条件

  1. float为none
  2. block元素(不包括inline-block, absolute, float)
  3. 只发生在垂直方向上

margin重叠的几种情况

1.兄弟

1
2
3
4
5
6
7
8
<div class="parent">
		<div class="child">
			内容
		</div>
		<div class="child">
			内容
		</div>
</div>
1
2
3
4
5
6
.child{
	width: 50%;
	height: 50%; /*高度是内容撑开的, 要记得height是尽可能小*/
	background-color: royalblue;
	margin: 5px 0px;
}

upload successful

2.父子 子明明有上margin但是没体现出来

1
2
3
.parent{
	background-color: coral;
}

upload successful

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

  1. 父元素不是BFC元素
  2. 父元素没有padding-top值
  3. 父元素没有border-top值
  4. 父元素和第一个子元素之间没有inline元素分隔
1
2
3
4
5
6
7
8
9
10
11
12
13
.child{
	width: 50%;
	height: 50%; /*高度是内容撑开的, 要记得height是尽可能小*/
	background-color: royalblue;
	margin: 5px 0px;
}

.parent{
	/*float: left;/*注意float变BFC的包裹性*/
	background-color: coral;
	overflow: hidden;
	margin: 2px;
}

upload successful

把父级改为BFC的话, 可见父子直接的margin回来了.

3.空的block 可以看出来margin 20px上下 没有撑开

1
2
3
<div class="box">
		<div class="void"></div>
</div>
1
2
3
4
5
6
7
8
.box{
	background-color: lightgreen;
	overflow: hidden;
}

.void{
	margin: 20px 0;
}

upload successful

出现可以直接控制是否要重叠的新属性

1
-webkit-margin-collapse: <collapse>(默认重叠) | <discard>(取消) | <separate>(分隔)

需要注意的是: 身处两个不同BFC的元素margin不重叠(两个蓝色内容块), 但是两个外层BFC(两个桔黄色块直接的margin还是重叠的)

upload successful