div的像素差距底部

Question

一个简单的问题，可能是一个简单的解决方案，但我似乎无法找到它。 正如您在示例中所看到的，在2个图像的底部与DIV（家庭顶部或家庭底部）之间存在像素间隙。 我该如何摆脱它？

＆＃13;

＆＃13;

.container{
    width:80%;
}

.menu{
    width:100%;
    background:black;
    color:white;
    text-align:center;
}

.home-top{
    background:white;
    overflow:hidden;
}

.home-bottom{
    background:#EEE;
    overflow:hidden;
}

.footer{
    width:100%;
    background:black;
    color:white;
}

.txt-left, .img-left{
    width:50%;
    float:left;
}

.txt-right, .img-right{
    width:50%;
    float:left;
}

＆＃13;

<div class="menu">
    menu
</div>
<div class="home-top">
    <div class="container">
        <h1>home top</h1>
        <div class="txt-left">
            some text goes here.
        </div>
        <div class="img-right">
            <img src="http://www.webtify.be/elkegeraerts/img/elke_geraerts.png" alt="" width="200" />
        </div>
        <div class="clear"></div>
    </div>
</div>
<div class="home-bottom">
    <div class="container">
        <h1>home bottom</h1>
        <div class="img-left">
            <img src="http://www.webtify.be/elkegeraerts/img/boek.png" alt="" width="200" />
        </div>
        <div class="text-right">
            some text goes here.
        </div>
        <div class="clear"></div>
    </div>
</div>
<div class="footer">
    footer
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

设置“display：block;”在图像上。

img{
    display:block;
}

https://jsfiddle.net/