CSS中上下边距的转移和折叠
CSS中上下margin的传递和折叠
1.上下margin传递
1.1.margin-top传递
为什么会发生最高利润转移？
块级元素的顶部线与父元素的顶部线,重叠，那么这个块级元素的边距顶值将被传递给父元素。
示例：设置内盒边距-top : 20px；参考{
宽度： 100 px；
高度： 100像素；
背景-color : # f00；
color: # fff
}。方框{
宽度： 200 px；
高度： 200 px；
背景-color : # 0f 0；
}。内部{
宽度： 100 px；
高度： 100像素；
背景色： # 00f；
边距-top : 20px；
}
Div class='reference '引用框/div
div class='box '
div class='inner'/div
/div
Run:内部页边距的值被传递到框中。
1.2.margin-bottom传递
为什么会发生底部边距转移？
块级元素的底部线与父元素的底部线和父元素的高度是auto,重叠，那么这个块级元素的边距底值将被传递给父元素。
示例：为内盒设置边距-bottom : 20px；并将height: auto设置为父元素；方框{
宽度： 200 px；
height: auto/*将自动设置为父元素的高度，或者不设置高度。默认为自动*/
背景-color : # 0f 0；
}。内部{
宽度： 100 px；
高度： 100像素；
背景色： # 00f；
边距-bottom : 20px；
color: # fff
}。参考{
宽度： 100 px；
高度： 100像素；
背景-color : # f00；
color: # fff
}
div class='box '
div class='inner'inner/div
/div
Div class='reference '引用框/div
Run:将内部页边空白的值传递给box。
1.3.如何防止出现传递问题
为父元素设置顶部填充或底部填充，以防止顶部线条或底部线条重叠。
将边框设置到父元素可以解决边距转移的问题；
触发BFC(块格式上下文)，简单理解为为父元素设置一个附魔，以防止上下页边距被忽略(最佳解决方案)。有以下几种方法可以触发BFC:
添加浮点(浮点的值不能为无)；
设置一个不可见的溢出属性(除了可见，可以使用其他属性值，如隐藏、自动、滚动等。);
设置位置(位置(位置的值不能是静态的或相对的)；
将显示值设置为内嵌块、表格单元格、flex、表格标题或内嵌flex；
2.上下margin折叠
边距崩溃，也称为外边距崩溃。两个垂直相邻的边距(上边距、下边距)可以合并成一个边距。但是水平边距(左边距、右边距)永远不会折叠。
2.1.兄弟块级元素之间上下margin折叠
示例：将box1的底部边距设置为40px，将box2的顶部边距设置为20px。
. box1 {
宽度： 100 px；
高度： 100像素；
背景-color : # f00；
边距-底部： 40px；
}
. box2 {
宽度： 100 px；
高度： 100像素；
背景-color : # 0f 0；
边距-top : 20px；
}
div class='box1'box1/div
div class='box2'box2/div
结果：两个盒子之间的距离为40px。
2.2.父子块级元素之间上下margin折叠
示例：内部将上边距设置为40px，父元素框将上边距设置为20px。参考{
宽度： 100 px；
高度： 100像素；
背景色： # 00f；
color: # fff
}。方框{
宽度： 200 px；
高度： 200 px；
背景-color : # f00；
边距-top : 20px；
}。内部{
宽度： 100 px；
高度： 100像素；
背景-color : # 0f 0；
边距-top : 40px；
}
Div class='reference '引用框/div
div class='box '
div class='inner'inner/div
/div
结果：上边距为40px。
2.3.总结
父子块级元素之间上下边距折叠的原因是，inner将上边距传递给了父元素框，然后将父元素框与其自己的上边距进行了比较。
折叠后的最终计算规则：比较两个值，取较大的值；
如果要防止上下页边距折叠，只能设置其中一个；
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/155864.html