Why does my table cell appear to have padding even though I've set it not to?

Question

I created a skinny CSS class that has no margin, padding or border:

.skinny
{
    margin:0 0 0 0;
    padding:0 0 0 0;
    border:0 0 0 0;
}

And I applied it to a row containing an image which also has the skinny class applied to it:

<td width="33%" align="center" class="skinny">
    <table width="400px" height="180px" class="skinny">
        <tr class="skinny">
            <td class="skinny" width="60px" height="100px"><a class="skinny" href="/"><img class="skinny" width="60px" height="100px" id="snapshot" src="/images/snapshot.png"></a></td>
            <td class="skinny" width="120px" height="100px"><a class="skinny" href="/"><h1 class="skinny">Product</h1></a></td>
        </tr>
    </table>
</td>

I'm trying to get the image to appear as close as possible to the <h1> text in the next cell so that they are pushed up against each other, left-to-right.

But no matter how many elements I apply the skinny class to, there seems to be something like a 'padding' around each of the table cells that creates a space between the image and the text.

How do I remove that?

Answer 1

Images are inline elements and sit on the base line, they are treated just like a letter with no descender (i.e. like a, b and c but not g, j and y).

Set the image to display: block to avoid this (or twiddle with vertical-align)

Better yet, since it looks like you have a 1x2 table: don't use tables for layout

Answer 2

the table itself also give padding. so the table definition needs to be

<table width="400px" height="180px" class="skinny" cellspacing="0" cellpadding="0">