Any web designer will tell you that a stray gap in the layout of your design can sometimes be a real killer to diagnose.
It happens regularly with images (the IMG tag) as there will be a keen eye on its positioning and what surrounds it.
Below are some tips and ways to remedy these gaps. Of course these will not solve all the problems, but they might aid you in diagnosing what the cause is.
1. Check your CSS:
Check the properties padding and margin are set to 0 on the image itself and on the containing element. Other common culprits to look out for are line-height and height properties.
CSS properties can also be inherited from parent elements. To see what CSS properties are on a particular element you could use a code inspector. For Firefox you can use Firebug; in Chrome you can right click on an element and select Inspect Element; or in Internet Explorer (IE) use Developer Tools from the Tools dropdown menu.
2. Check the Doctype
Take a look at your Doctype (the first line that should be present in your HTML). Gaps underneath images regularly occur when using the Strict Doctype which can add an almost-silent margin at the bottom of an image.
3. Check for spaces in code
This usually occurs when there is an annoying gap on the side of an image. Remove any spaces preceding or after the IMG tag in your code – in HTML a space is a space and will be outputted as so.
4. For images in Tables
Check the border, cellpadding and cellspacing properties and that they are set to 0. A cheap way to reset border and cellspacing is to use CSS using border-collapse:collapse;
5. Check the image
It might sound dumb, it is very unlikely, but you never know, there might be transparency used on the image (such as on a gif or a png), or a previous designer decided to match part of the image with your existing background colour.