white space around an img tag within a th

Question

img space

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!

Any chance you could make a fiddle that demonstrates your problem? What about browsers, only some or all? — Holger, Jun 16 '11 at 18:59
Does this answer your question? [Image inside div has extra space below the image](https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image) — mfluehr, Mar 14 '22 at 16:07

Guffa · Accepted Answer · 2011-06-16T19:22:03.510

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.

score 1 · Answer 2 · answered Jun 16 '11 at 19:01

1

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

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

answered Jun 16 '11 at 19:01

roberkules

6,557
2
44
52

This, for the most part works, but I think changing to block alignment is better. – Brian Jun 16 '11 at 19:32
Well, I wouldn't use `float:left` if it's not necessary. – roberkules Jun 16 '11 at 19:38

score 1 · Answer 3 · answered Jun 16 '11 at 19:02

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.

score 0 · Answer 4 · answered Jun 16 '11 at 18:57

0

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.

answered Jun 16 '11 at 18:57

George Cummins

28,485
8
71
90

white space around an img tag within a th

4 Answers4