CODEWITHSUNDEEP
htmlcssmargintablelayout
Brian McInerney
Brian McInerney

Reputation: 165

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

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?

Upvotes: 14

Views: 15386

Answers (8)

Rohan Hussain
Rohan Hussain

Reputation: 331

For me it was an issue with a mismatch between the line-height of the <td> and the <div> I had placed inside it which was in turn being caused by the tailwind text-* classes.

Upvotes: 0

mervasdayi
mervasdayi

Reputation: 759

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)

Upvotes: 1

Trolzie
Trolzie

Reputation: 348

Add this to your tr's & td's

cellpadding="0"
cellspacing="0"

Upvotes: 0

Ally
Ally

Reputation: 4942

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.

Upvotes: 0

Anish Joseph
Anish Joseph

Reputation: 1026

It may not be padding just try this

border-collapse:collapse;

Upvotes: 3

Quentin
Quentin

Reputation: 943630

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

Upvotes: 2

Vlagorce
Vlagorce

Reputation: 866

/* Remove padding and margin */ 

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

Upvotes: -3

mooizo
mooizo

Reputation: 73

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

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

Upvotes: 5

Related Questions