父子div发生margin重叠_父子div margin重叠-CSDN博客

本文介绍了一种在网页布局中常见的问题——父子div元素的margin重叠现象，并提供了五种有效的解决方案，包括调整padding、使用overflow属性、声明浮动、添加边框及使用绝对定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
  #father{
  width:500px;
  height:500px;
  background:pink;
  margin:10px;
  


  }
  #son{
   width:200px;
   height:200px;
   background:gray;
   
   margin:10px;
  }
  </style>
 </head>
 <body>
  <div id="father">
  <div id="son"></div>
  </div>
 </body>
</html>