元素上方的额外空白位置：relative和float：left

Question

在与以下CSS代码关联的HTML中，.post元素包含在#posts元素中。

为什么在第二个瓷砖上方有额外的空白区域？

http://i58.tinypic.com/29mnhc8.jpg

#posts {
    top: 20%;
    left: 7%;
    position: absolute;
    padding: 0%;
    width: 75%;
    transition: top 0.1s ease;
    background-color: red;
}
.post {
    position: relative;
    float: left;
    left: 1%;
    width: 48%;
    height: 350px;
    margin-bottom: 1%;
    margin-right: 1%;
    background-color: #52e2fe;
}