圖片下方空白

本文轉載於:猿2048網站圖片下方空白

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

 

若是將圖片豎直向下排列，會發現圖片上邊框與下邊框之間有一小塊空白，這是由於圖片對齊方式致使的。

HTML以下：

1 <div class="box">
2     <img src="images/logo.png" alt="">
3     <img src="images/logo.png" alt="">
4     <img src="images/logo.png" alt="">
5     <img src="images/logo.png" alt="">
6 </div>

CSS以下：

1 div{
2     padding: 20px;
3     background-color: #fff;
4     border: solid 1px #666666;
5 }
6 img{
7     border: solid 1px #666;
8 }

上面CSS是想將圖片加上邊框，而後豎直緊貼排下來，但效果以下所示

解決方案

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

給圖片設置第 2 行或第 3 行都可，不用都寫，實在懶，放在一塊兒給了，均可以達到下面的效果

 

修正

因爲採用上面方法一直未出現問題，故一些問題沒考慮到。

感謝@孑孓子指出考慮不周之處，現將上面方法修改以下：

1 img{
2     display: block;
3     /* vertical-align: top; */
4     border: solid 1px #666;
5 }
6 
7 .box{
8     font-size: 0;
9 }

 

over~