深入了解margin
Rio 2023-01-01
css
总览
margin传递、重叠、覆盖、负值笔记总结
# 上下margin的传递（外边距塌陷）
margin-top传递
如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
问题 对蓝色盒子设置margin-top预期结果不是蓝色与绿色反应而是绿色与粉色反应
解决后
margin-bottom传递
如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
.box{
width: 300px;
height: 100px;
background-color: pink;
}
.container{
width: 100px;
height: 100px;
background-color: lightblue;
margin-bottom: 100px;
}
<div class="box">
<div class="container"></div>
</div>
<div>哈哈哈哈哈</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
在设置父元素高度为auto后（如果一开始就不设置高度 高度默认值也是auto）
# 如何防止出现margin-top传递问题?
- 给父元素设置内边距
- 给父元素设置border
- 触发BFC:父元素设置overflow为auto
- 子元素设置inline-block（影响块级盒子不影响inline和inline-block）
- 子元素使用相对定位
- 子元素使用浮动
# 外边距重叠
同一个BFC中相邻的两个盒子的外边距结合成一个单独的外边距 折叠外边距的计算规则：
正正取大值、正负值相加、负负最负值
# margin覆盖
- 两个block元素重叠时，后面元素可以覆盖前面元素的背景，但无法覆盖其内容 2. 当两个inline元素，或两个line-block元素，或inline与inline-block元素重叠时，后面元素可以覆盖前面元素的背景和内容 3. 当inline元素(或inline-block元素)与block元素重叠时，inline元素(或inline-block元素)覆盖block元素的背景
# margin负值问题
- margin-top和margin-left负值，元素向上、向左移动
- margin-right负值，右侧元素左移，自身不受影响
- margin-bottom负值，下方元素上移，自身不受影响
