为啥这个程序的margin没有重叠

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float1</title>
<style type="text/css">
*{
          margin: 0;
          padding: 0;
         }
         .container{
          width: 1000px;
          height: 400px;
         }
         .header{
          overflow: hidden;
         }
         .header>div{
          float:left;
            margin: 10px;
         }
         .main{
          overflow: hidden;
         }
         .main>div{
          float:left;
          margin: 10px;
         }
</style>
</head>
<body>
<div class="container">
<div class="header">
     <div class="div1">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<div>欢迎来到慕课网学习新知识！</div>
     </div>
     <div class="div2">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<div>欢迎来到慕课网学习新知识！</div>
     </div>
     <div class="div3">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<div>欢迎来到慕课网学习新知识！</div>
     </div>
</div>
<div class="main">
     <div class="div4">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<div>欢迎来到慕课网学习新知识！</div>
     </div>
     <div class="div5">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<div>欢迎来到慕课网学习新知识！</div>
     </div>
     <div class="div6">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<div>欢迎来到慕课网学习新知识！</div>
     </div>
</div>
</div>
</body>
</html>

程研板 2019-01-13

源自：float浮动 3-4 编程练习

收起

1回答

好帮手慕阿满回答被采纳获得+3积分 2019-01-13 12:17:37

同学的代码完成的不错，不过根据效果图显示，建议给外边的div加一个虚线边框。另外同学所说的margin重叠是什么意思呢？建议同学描述的更清晰些，必要时，可以截图说明。祝：学习愉快~

收起回答

程研板提问者 #1

就是6个小方框之间我设置了10px的外边距,然后我打开开发者工具后发现这6个div之间间隔是20px，按原理来说外边距应该是会重叠的啊，每个div之间会是10px的间隔。

2019-01-14 00:35:04
好帮手慕阿满回复提问者程研板 #2

margin重叠现象发生在普通元素之间，如果是flaot元素，将不会发生重叠现象。同学可以去掉float再观察一下。如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~

2019-01-14 10:45:29