图片下方空白

本文地址：http://www.cnblogs.com/veinyin/p/7606581.html 

如果将图片竖直向下排列，会发现图片上边框与下边框之间有一小块空白，这是因为图片对齐方式导致的。

HTML如下：

<div class="box">
    <img src="images/logo.png" alt="">
    <img src="images/logo.png" alt="">
    <img src="images/logo.png" alt="">
    <img src="images/logo.png" alt="">
</div>

CSS如下：

div{
    padding: 20px;
    background-color: #fff;
    border: solid 1px #666666;
}
img{
    border: solid 1px #666;
}

上面CSS是想将图片加上边框，然后竖直紧贴排下来，但效果如下所示

解决方案

img{
   display: block;
   vertical-align: top;
   border: solid 1px #666;
}

给图片设置第 2 行或第 3 行均可，不用都写，实在懒，放在一起给了，都可以达到下面的效果

修正

由于采用上面方法一直未出现问题，故一些问题没考虑到。

感谢@孑孓子指出考虑不周之处，现将上面方法修改如下：

img{
    display: block;
    /* vertical-align: top; */
    border: solid 1px #666;
}

.box{
    font-size: 0;
}

over~