# CSS 常见问题
# 外边距塌陷
div {
margin-top: 10px;
}
1
2
3
2
3
会发生外边距塌陷的情况
垂直方向，不是水平方向块级元素，不是行内元素，也不是行内块级元素
# 外边距计算方式
# 相邻
正数 && 正数 最大的数
.div_1 {
margin-bottom: 30px;
}
.div_2 {
/* √ */
margin-top: 40px;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
- 负数 && 负数 绝对值最大的数
.div_1 {
margin-bottom: -30px;
}
.div_2 {
/* √ */
margin-top: -40px;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
- 正数 && 负数 相加的和
/* 10px */
.div_1 {
margin-bottom: -30px;
}
.div_2 {
margin-top: 40px;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11