I have two anchored images on top of each other, separated with a line break. I want the images to sit directly on top of each other, but in Firefox there is a gap between the images. It works in IE7. The only way I have been able to fix this is by changing the line-height (which I don't want to do).
<a href="image.jpg">
<img height="75" width="75" src="image.jpg" />
</a>
<br/>
<a href="image2.jpg">
<img height="75" width="75" src="image2.jpg" />
</a>
Placing the CSS property vertical-align to bottom on the top image will remove the gap in Firefox.
Perhaps setting the images to display:block would work. As an image is by default inline with the text, it leaves space at the bottom for descendenders (such as j,g,and y), even though an image will never have any. Many browsers account for this, but doing so is non-standard. Setting them to block should remove this annoyance in all browsers.
来源：https://stackoverflow.com/questions/1111783/css-how-to-remove-whitespace-between-anchored-images