white space around an img tag within a th

Question

This question involves the black box from the picture (it is a <th> tag).

The <th> tag ends up with a height of 23px. The images are 18px by 18px. Where's the 5px bottom margin coming from and how to I get rid of it?

borders, padding, and margins are all set to 0. manually setting the height of the <tr> and the <th> tag to 18px doesn't do anything. Anything below 23px has no effect.

Help!

Answer 1

Images are inline elements, so they are placed on a text line in the element. The images are aligned on the base line of the text, so there is a gutter below the base line used for hanging characters like g and j. The extra space is that gutter.

You can get rid of the space by turning the images into block elements. As you want the images beside each other, using the style float:left; would make them block elements and line them up.

Answer 2

Do you have white spaces around the images in your html source code? If yes, try removing them:

<th><img src="..." alt="" /></th>

Answer 3

That's probably the line-height . Try setting it to zero. Sample HTML:

<table>
    <tbody>
        <tr>
            <td>
                <img src="http://placekitten.com/16/16">
                <img src="http://placekitten.com/16/16">
            </td>
        </tr>
    </tbody>
</table>

And CSS:

td {
    background: #000;
    line-height: 0;
}

Live example: http://jsfiddle.net/ambiguous/4VMTV/

Try the above with and without the line-height: 0 and you should see the difference.

Answer 4

If you use Chrome or Firefox + Firebug , you can right-click the th and inspect the element. This will provide additional detail that will help you to determine what padding or margin is being added, and why.