我有两个图片 pic1.png（100px x 20px ）和 pic2.png（100px x 380px ），每个图片都在一个链接中，应该看起来比如一张100px x 400像素的图片。不幸的是（至少在Firefox和IE中），这两张照片之间存在几个px的可见差距。
网站来源（请原谅我把它全部放在一行 - 但我不想通过格式化来伪造确切的代码）：
<div style="display:inline-block;width:100px;height:400px;max-height:400px"><a href="someurl"><img alt="somealt" title="sometitle" src="pic1.png"></a><a href="someurl"><img alt="somealt" title="sometitle" src="pic2.png"></a></div>
您能否告诉我上述来源有什么问题以及如何解决？
答案 0 :(得分：3)
图像正在一个在另一个下面呈现，就好像它们是文本一样，在不同的行中。因此，line-height CSS属性会在其中产生可见空间，就像您期望文本行之间有一些间距一样。
您可以通过将line-height: 0;添加到div的样式来解决此问题。
查看示例：JSFiddle
答案 1 :(得分：0)
你应该为图像添加border =“0”属性，浏览器为锚标记内的图像添加1或2像素的边框，并使用默认的“链接”样式，可能你是获得图像之间的空间。
<a href="someurl"><img alt="somealt" title="sometitle" src="pic1.png" border="0"></a>
或在您包含的CSS文件中，这将使锚标记内的任何图像都没有边框：
a img { border: 0; }
答案 2 :(得分：0)
http://jsfiddle.net/njwx47tg/
为什么不使用float:left？到a代码？