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?

Beeves

Not the answer but may I suggest you just use property-name: 0 (the short-hand version of 0 0 0 0)... there is nothing wrong with the way it is now, but it just reads easier if there is only one 0. Using the "0 0 0 0" method is meant for if you have different widths for any of the edges. – Smother

had same issue, removing height attribute did the job for me – Deposit

Answer 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">

Hemielytron

Thanks. I just tried that but it made no difference. Can I apply something similar to the cell itself? – Beeves

Answer 2

It may not be padding just try this

border-collapse:collapse;

Iden

Answer 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

Sherlynsherm

display:block has no effect here. – Beeves

May I just add that tables are meant (and always have been) for data display only - so not for page layout or even just part of the page layout. If you are using this table for layout then try using divs instead. There are many ways to achieve layout with divs - for instance floating / clearing for columns, margin positioning if you want one "column" in the middle of the page (so all content appears centred in the browser viewport) and so on. – Smother

Answer 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)

Deposit

This behavior also happens when you set vertical-align: top|middle|bottom on a table-cell. The browser imputes padding above and/or below the content of the cell to achieve the desired vertical alignment. – Keystroke

Answer 5

Collapsing margins

Late to the party but it is because your h1 tag most likely has some margins top or bottom. Margins collapse all the way up through to there uppermost element in the dom until it finds an element with padding-top or padding-bottom that does not equal 0 (this interrupts the collapsing). It is a very infuriating feature.

Collapsing margins always come back to bite me when I least expect it and there very tricky to debug.

Lawrencelawrencium

Answer 6

Add this to your tr's & td's

cellpadding="0"
cellspacing="0"

Agrippina

Answer 7

/* Remove padding and margin */

*  
    { 
    margin: 0; 
    padding: 0; 
    border: 0; 
}

Palestine