一、概念
一般是指垂直方向相邻的外边距会发生重叠现象,大多发生在
兄弟元素
和父子元素
之间。二、兄弟元素
box2是box1的兄弟元素
当两者都是正值时:取二者之间的最大值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> .box1{ width: 200px; height: 200px; background-color: tomato; margin-bottom:50px; } .box2{ width: 200px; height: 200px; background-color: #bfa; margin-top:100px; } </style> <body> <div class="box1"></div> <div class="box2"></div> </body> </body> </html>
一正一负:取二者之和
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 当两者都是正值时:取二者之间的最大值 <style> .box1{ width: 200px; height: 200px; background-color: tomato; margin-bottom:50px; } .box2{ width: 200px; height: 200px; background-color: #bfa; margin-top:100px; } </style> --> <style> .box1{ width: 200px; height: 200px; background-color: tomato; margin-bottom:-50px; } .box2{ width: 200px; height: 200px; background-color: #bfa; margin-top:50px; } </style> <body> <div class="box1"></div> <div class="box2"></div> </body> </body> </html>
两个都负值:取绝对值较大的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 当两者都是正值时:取二者之间的最大值 <style> .box1{ width: 200px; height: 200px; background-color: tomato; margin-bottom:50px; } .box2{ width: 200px; height: 200px; background-color: #bfa; margin-top:100px; } </style> --> <!-- 一正一负:取二者之和 <style> .box1{ width: 200px; height: 200px; background-color: tomato; margin-bottom:-50px; } .box2{ width: 200px; height: 200px; background-color: #bfa; margin-top:50px; } </style> --> <style> .box1{ width: 200px; height: 200px; background-color: tomato; margin-bottom:-50px; } .box2{ width: 200px; height: 200px; background-color: #bfa; margin-top:-100px; } </style> <body> <div class="box1"></div> <div class="box2"></div> </body> </body> </html>
三、父子元素
box2是box1的子元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> .box1{ width: 200px; height: 200px; background-color: tomato; } .box2{ width: 100px; height: 100px; background-color: #bfa; } </style> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html> </body> </html>
- 当box2的上外边距设置为100:
- 这时父元素也会向下移动,即:子元素的外边距会传递给父元素。
四、四种解决方案
1.给父元素加上内边距,然后再裁去多余的长度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- <style> .box1{ width: 200px; height: 200px; background-color: tomato; } .box2{ width: 100px; height: 100px; background-color: #bfa; margin-top:100px; } </style> --> <!-- 使用padding不会产生边距折叠问题 --> <style> .box1{ width: 200px; height: 100px; padding-top:100px; background-color: tomato; } .box2{ width: 100px; height: 100px; background-color: #bfa; } </style> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html> </body> </html>
2.用外边距但是不相邻,给父元素加一个边框,然后把边框颜色改成父元素的颜色,再裁去多余的边框长度:
<style> .box1{ width: 200px; height: 199px; background-color: tomato; border-top: 1px solid tomato; } .box2{ width: 100px; height: 99px; background-color: #bfa; margin-top:100px; } </style>
3.为子元素开启BFC:
<style> .box1{ width: 200px; height: 200px; background-color: tomato; } .box2{ width: 100px; height: 100px; background-color: #bfa; float:left; margin-top:100px; } </style>
4. clearfix:在父元素的最前边增加一个空白元素,然后将元素作为块元素来显示
<style> .box1{ width: 200px; height: 200px; background-color: tomato; } .box2{ width: 100px; height: 100px; background-color: #bfa; margin-top:100px; } .box1::before{ content:""; display:table; } </style>
面试题:外边距折叠问题 (块级元素在普通文档流中的BUG)
于 2022-07-16 14:51:33 首次发布
本文详细介绍了CSS中垂直外边距重叠的现象,包括兄弟元素和父子元素之间的外边距处理。当两个元素外边距均为正值时,它们之间的外边距取最大值;一正一负则取二者之和;两负值取绝对值较大者。针对父子元素的外边距传递问题,提出了四种解决方案:1) 使用内边距并裁剪多余长度;2) 利用边框代替外边距;3) 开启BFC(块级格式化上下文);4) 使用clearfix。这些方法能有效避免外边距重叠问题。
摘要由CSDN通过智能技术生成