使用css解决图片间多余空白的方法

上传多张图片的时候，偶然间发现图片之间会有多余空白出现，尤其是长图切成小图后，视觉效果尤其碍眼。那么为什么会发生图片之间有多余空白的情况呢？

发生这种情况是因为image是一个内联级别的元素，所以浏览器在基准线下方添加了一些空格以调整其它内联元素。
在行进页面的DIV+CSS排版时，碰到IE6（当然时有Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是不常见的，对于该题问的决解方法也是“具体事情具体解决”。解决此问题的最简单方法是display将图像的默认值从内联更改为块，即display: block;在图像上应用样式：

.showInfo .showContxt img, .showInfo .showContxt iframe {
    max-width: 100%;
    height: auto!important;
    display: block;
}

当然，不同情况，解决方法也不同。

1、将图片转换为块级对象

设置img为“display:block;”。在本例中添加一组CSS码代：“#sub img {display:block;}”。

我碰到的问题就是用这个方法决解的。我把a img {display:block;}这样定义好后，A属性的高度就不会比预感的高了。注意不要定义 img {display:block;}，如果这样的话，有一些图片表现的效果可能会不一样的，比如图文与文字混排的时候，图片不会居中，而是在顶部位置。

2、设置图片的垂直对齐方式

设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。如本例中加增一组CSS码代：“#sub img {vertical-align:top;}”。

3、设置父对象的文字大小为0px

在#sub中添加一行：“font-size:0;”可以解决问题。但这也引发了新的问题，在父象对中的文字都法无表现。就算文字部份被子对象括起来，设置子对象文字大小依然可以表现，但在CSS效验的时候会提示文字过小的错误。

4、转变父对象的属性

如果父对象的宽、高牢固，图片大小随父对象而定，那么可以设置“overflow:hidden;”来解决。如本例中可以向#sub中添加以下码代：“width:88px;height:31px;overflow:hidden;”。

5、设置图片的浮动属性

即在本例中增加一行CSS代码：“#sub img {float:left;}”。如果要实现图文混排，这类方法是很好的选择。

6、取消图片标签和其父对象的最后一个结束标签之间的空格

这个方法要强调下，在现实开发中该方法可能会出乱子，因为在写代码的时候为了让代码更体现语义和层次清晰，不免要通过IDE供给代码缩进表现，这必然会让标签和其它标签换行表现，比如说DW的“套用源格式”命令。所以说这个方法可以供我们了解出现BUG的一种情况。