CSS 什么是外边距重叠？重叠的结果是什么？ - 码农知识堂

CSS 什么是外边距重叠？重叠的结果是什么？
外边距重叠是CSS中的一种现象，当两个（或更多）相邻的元素具有外边距时，它们的外边距可能会合并（重叠）成一个较大的外边距，而不是简单地叠加在一起。外边距重叠通常出现在垂直方向上，有一些规则来确定最终的外边距大小。

重叠的结果通常是最大的外边距值会被保留，而较小的外边距值会被忽略。这可能导致某些布局上的意外效果，因此在设计和调整布局时需要小心处理外边距重叠。

下面是一个简单的HTML和CSS示例，演示外边距重叠的情况：
```
DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 20px;
  }
 
  .box1 {
    margin-bottom: 40px;
  }
 
  .box2 {
    margin-top: 30px;
  }
style>
head>
<body>
  <div class="box box1">Box 1div>
  <div class="box box2">Box 2div>
body>
html>
```
在这个示例中，.box1和.box2元素的上边距和下边距会发生重叠。由于外边距重叠的规则，最终重叠的外边距值为40px，因此两个盒子之间的垂直间距不是30px + 40px，而是仅仅40px。

外边距重叠的处理可以通过添加额外的定位或内边距来规避，具体方法取决于您的布局需求。
相关阅读:
自动驾驶研究生就业如何,自动驾驶的研究方向
 数据分析：微生物组差异丰度方法汇总
 【漏洞复现系列】二、weblogic-cve_2020_2883（RCE/反序列化）
10_上传漏洞_代码审计&文件命名
 flutter pod install, Error installing FMDB
软件开发和测试
 基于Hadoop平台的大数据可视化分析实现与应用
 Nginx的日志格式
 “讳疾忌医”的开源走不远
 hadoop分布式文件系统
原文地址：https://blog.csdn.net/m0_74801194/article/details/133898120