How to set <td> to the same size of an <img>

Question

I'm trying to align some images in my html using <table>. I want no white space between the images. Here's my progress so far: JSFiddle example. I still have some white spaces left between the two brown boxes.

I'm putting the images under <td>:

<td>
     <img src="..."/>
</td>

The brown boxes are 128x128, but my <td> is 128x132. I've checked that padding and border of my td are all zeros. Why is my td taller than my img and how do I set my <td> to exactly same size as my <img>?

Answer 1

The trick is vertical-align: middle!

Because images are aligned as inline elements, they behave pretty much like a normal character, such as a letter. If you align it in the middel of the line, the gaps will magically disappear. Check out your updated Fiddle

You can change this specifically for the image inside the table, or site-wide (which I always do when starting a new project, and if I'm not mistaken reset.css and html5 boilerplate etc. do the same).

td img { vertical-align: middle; } /* Only images inside tables */
/* OR */
img { vertical-align: middle; } /* fixes it for the whole site */

EDIT

Out of the comments I understand some explanation is needed, so let's look at this Fiddle

First take a look at the first paragraph (the one with the underlined line of text). If you look at 'hanging letters' (eg. the 'g', the 'p' and the 'y'), you'll notice that a part of the character actually 'hangs' under the line. But the 'bottom of the character' is actually deemed a bit higher then the lowest visual part of the character. Characters are aligned by the lower part of a 'normal' character, eg. the letter 'c', 'h', 'a', etc.

Now you ask yourself, what the ... does this has to do with images? Well, basically images are handled pretty much the same as characters, as long as they are aligned inline. But it also means that in a line with text (or inline elements) a little space is reserved for the 'hanging part' of a character, as you can see when we draw a box again around the paragraph (the paragraph with the characters 'AgH').

Now you could get a clue, because I said earlier that inline images are handled the same. Because, the browser reservers a bit of space as well in case you would've put in an image with a hanging part! Now ofcourse this is nonsense, because an image never breaks out of it's box, but the browser doesn't care. That's why you need to explicitly align the image!

I've put three more examples, one with the text aligned to the top, one to the middle and one to the bottom. As you see in a non-aligned paragraph the space for the 'hanging part' is reserved, but not for the aligned versions, because now the lowest part of the image is indeed handled as the lowest possible edge of the element.

I hope this clears up the 'magic' and makes you understand it a bit better :)

And one sidenote: although display: block on the image might work, it is considered bad practice as images don't always need to be displayed as a block element (meaning it is spanning the whole width of it's container, with a line break before and after). So if you want to fix it for once and for all, just use this little snippet somewhere on the top of your stylesheet: img { vertical-align: middle; }

Answer 2

Since img is an inline element, td "keeps" one line for others inline elements on the bottom. So you have two solutions :

td {
    line-height: 0;
}

or :

img {
    display: block;
}