请老师检查一下，关于设置图片之间的距离有疑惑

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>buju</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    img{vertical-align:middle;}
        .main{
            height: 360px;
            width:1080px;
            position:absolute;
            top:50%;
            left:50%;
            margin-left:-540px;
            margin-top:-180px;
        }
        .heard{
            height: 240px;
            width:1080px;
            background: #add8e6;
            overflow:hidden;
            *zoom:1;
        }
        .heard .hleft{
            float:left;
            height:240px;
            line-height: 240px;
            /*width:40%;*/
            margin-left: 10%;
        }
        .heard .hright{
            float:right;
            height:240px;
            line-height: 240px;
            /*width:10%; */
            margin-right: 10%;
        }
        .foot{
            height: 120px;
            width:1080px;
            background: #ffb6c1;
            overflow:hidden;
            *zoom:1;
        }
        .foot .fleft{
            float: left;
            height: 120px;
            line-height:120px;
            margin-left: 10%
        }
        .foot .fmiddle{
            float:left;
            height: 120px;
            line-height:120px;
            margin-left:10%;
        }
        .foot .fright{
            float:right;
            height: 120px;
            line-height:120px;
            margin-right: 10%;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="heard">
            <div class="hleft"><img src="http://img1.sycdn.imooc.com\/climg/58c0f808000129a303600215.jpg" alt=""  /></div>
            <div class="hright"><img src="http://img1.sycdn.imooc.com\/climg/58c0f819000198a703600214.jpg" alt=""></div>
        </div>
        <div class="foot">
            <div class="fleft"><img src="http://img1.sycdn.imooc.com\/climg/58c0f81d0001fe4402000060.jpg"></div>
            <div class="fmiddle"><img src="http://img1.sycdn.imooc.com\/climg/58c0f8220001dfce02000060.jpg"></div>
            <div class="fright"><img src="http://img1.sycdn.imooc.com\/climg/58c0f8780001c74602000060.jpg"></div>
        </div>
    </div>
</body>
</html>