Why does my table cell have padding, although I did not set it?

Question

I created a skinny CSS class that has no margins, padding, or borders:

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

And I applied it to a line containing an image that also has a 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 am trying to get the image as close as possible to the text <h1> in the next cell so that they are shifted against each other, from left to right.

But no matter how many elements I apply to the skinny class, it looks like something like “filling” around each cell in the table, which creates a space between the image and the text.

How to remove this?

Answer 1

the table itself also gives the fill. therefore the table definition should be

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

Answer 2

This may not be a supplement, just try it.

 border-collapse:collapse; 

Answer 3

I had the same problem and worked for several hours. The problem was setting the height on the td elements. If the content height is 60 pixels and the td height is 120 pixels, then 30px will be filled at the top and bottom.

So the correct answer would 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> 

(remote height)

Answer 4

Images are built-in elements and sit on the baseline, they are processed in the same way as a letter without a separator (i.e. like a, b and c, but not g, j and y).

Set the image to display: block to avoid this (or return using vertical-align )

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

Answer 5

Collapse fields

Late to the party, but this is because your h1 tag most likely has some margins at the top or bottom. Fields are collapsed all the way to the topmost element in dom until it finds an element with padding-top or padding-bottom that is not 0 (this interrupts folding). This is a very unpleasant feature.

Collapsing fields always come back to bite me when I least expect it, and it’s very difficult to debug there.

Answer 6

Add this to tr and td '

 cellpadding="0" cellspacing="0" 

Answer 7

/ * Remove indents and margins * /

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