How to change this table layout to a css layout?

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" he开发者_如何学Pythonight="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.

What would I need to do to make this a CSS layout that puts the image directly to the left of the text with no space between them?

I tried this:

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

But it puts the image on top of the text.

Try

table.skinny { border-collapse:collapse; }

EDIT: IF you have a lone image in a td, display:block will get rid of the descender space.

Also, you can mess with the line-height of the h1 and set it to 1 or something.

try this:

div.skinny {
   display: inline-block;
   vertical-align: middle;
}   

play with it here: http://jsfiddle.net/SebastianPataneMasuelli/qAjkv/

In the original layout, change the width of the second td to *. What's happening is that the table, and so the row, has a fixed amount of width to fill, and the layout engine is sharing it between the cells.

If you want to use the divs, then as Sebastian says, use display: inline-block.

Does this do anything?

table.skinny {
    border-spacing: 0;
}

And although it’s off-topic, several zeroes have the same effect as just one zero:

.skinny
{
    margin: 0;
    padding: 0;
    border-style: none;
}

Try

.skinny { float:right }