关于CSS问题，得凑够10啊

Question

代码如下，很简单的

 <style>
        html,body { font-family:"微软雅黑"}
        html,body,div{padding:0; margin:0; border:0; outline:0;}

        .slideBox{width:640px; height:300px; overflow:hidden;}
        .items  div{display:inline-block;}
    </style>

3个图片自身的宽高相同，宽为640px，高为300px

 <div class="slideBox">
    <div class="items">
        <div><a href="#"><img src="img/1.jpg"></a></div>
        <div><a href="#"><img src="img/2.jpg"></a></div>
        <div><a href="#"><img src="img/3.jpg"></a></div>
    </div>
</div>

在浏览器上查看，包裹 a 标签的那3个div的高均为303px，为什么会多出来3px，不明白。请各位不吝赐教

Answer 1

img设置display变为块级元素
img容器多出4px空白边解决办法