demo1和demo2存在margin合并问题：
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
弥补方案：bfc;
添加一个父级盒子做bfc：
.wrapper{
overflow: hidden;
}
demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin合并</title> <style> *{margin: 0;padding: 0;} .box1{ background-color: red; margin-right: 100px; } .box2{ background-color: green; margin-left: 100px; } .demo1{ background-color: red; margin-bottom: 100px; } .demo2{ background-color: green; margin-top: 100px; } .wrapper{ overflow: hidden; } </style> </head> <body> <!-- box1和box2是正常的margin相加 --> <span class="box1">123</span> <span class="box2">234</span> <!-- 添加一个父级盒子做bfc --> <div class="wrapper"> <div class="demo1">1</div> </div> <!-- 添加一个父级盒子做bfc --> <div class="wrapper"> <div class="demo2">2</div> </div> <script> /** * * demo1和demo2存在margin合并问题： 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 解决方案：bfc; */ </script> </body> </html>