空隙是如何产生的？

<html>
<head>
<style type="text/css">
body {
    width:400px;
    font-size:30px;
}
#top {
    width:400px;
    line-height:30px;
    background-color:#6CF;
    padding-left:5px;
}
#box {
    width:400px;
    background-color:#FF6;
    padding-left:5px;
    position:static;
}
#box-1 {
    width:350px;
    background-color:#C9F;
    margin-left:20px;
    padding-left:5px;
}
#box-2 {
    width:350px;
    background-color:#C6F;
    margin-left:20px;
    padding-left:5px;
}
#box-3 {
    width:350px;
    background-color:#C3F;
    margin-left:20px;
    padding-left:5px;
}
#footer {
    width:400px;
    line-height:30px;
    background-color:#6CF;
    padding-left:20px;
}
</style>
</head>
<body>
<div id="top">id=&quot;top&quot;</div>
<div id="box">id=&quot;box&quot;
  <div id="box-1">
    <p>id=&quot;box-1&quot;</p>
  </div>
  <div id="box-2">
    <p>id=&quot;box-2&quot;</p>
   </div>
  <div id="box-3">
    <p>id=&quot;box-3&quot;</p>
  </div>
</div>
<div id="footer">id=&quot;footer&quot;</div>
</body>
</html>

下面是显示效果

图片描述