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?

Solution 1

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

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

Solution 2

It may not be padding just try this

border-collapse:collapse;

Solution 3

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

Solution 4

I had same issue, and googled for hours. Issue was with setting height on td elements. If content height is 60px, and td height is 120px, there will be 30px padding on top and bottom each.

So the correct answer will be:

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

(removed height)

View more solutions