Removing cell padding (email purposes)

Question

I'm asking why there's 1px of padding in the cells in the following code:

     <table style="border: 1px solid #B0B0B0; width: 900px; height: 196px;border-collapse: collapse;">
        <tr>
            <td rowspan=2 style="vertical-align: top;">
                <img src="http://ayudawp.com/wp-content/uploads/2008/08/imagen.jpg" alt="imagen" style="height:193px; width:285px;">
            </td>
            <td colspan=2 style="text-align: center;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna $
            </td>
        </tr>
        <tr>
            <td>
                20e
            </td>
            <td>
                -60 %
            </td>
            </tr>
        </tr>
    </table>

I want the image to be without top and left padding. And I can't use the padding attribute. Reading on CSS table specs, I read that extra padding is added if there are cells of different heights on a row, but even forcing each cell to have the same height doesn't fix that.

Answer 1

based on what you said

And I can't use the padding attribute

This seems to me that you are using this code for Email purposes.

So, here is a possible solution, by using the old cellpadding and cellspacing properties for table (plus I added display:blockto your img to fix the gap caused by img being an inline element)

<table cellpadding="0" cellspacing="0" style="border: 1px solid #B0B0B0; width: 900px; height: 196px;border-collapse: collapse;">
    <tr>
        <td rowspan="2" style="vertical-align: top;">
            <img src="http://ayudawp.com/wp-content/uploads/2008/08/imagen.jpg" alt="imagen" style="height:193px; width:285px;display:block" />
        </td>
        <td colspan="2" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna $</td>
    </tr>
    <tr>
        <td>20e</td>
        <td>-60 %</td>
    </tr>
</table>

If this is not for email purposes, do not use cellpadding nor cellspacing since they are deprecated, thus you have to use CSS atributes instead, like padding.

Answer 2

Browsers have an internal stylesheet which defines the default styles for that browser.

In my case, Firefox has (see it in the source code)

td {
  padding: 1px;
}

You can remove it with

td {
  padding: 0;
}

td {
  padding: 0;
}

<table style="border: 1px solid #B0B0B0; width: 900px; height: 196px;border-collapse: collapse;">
  <tr>
    <td rowspan=2 style="vertical-align: top;">
      <img src="http://ayudawp.com/wp-content/uploads/2008/08/imagen.jpg" alt="imagen" style="height:193px; width:285px;">
    </td>
    <td colspan=2 style="text-align: center;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna $
    </td>
  </tr>
  <tr>
    <td>
      20e
    </td>
    <td>
      -60 %
    </td>
  </tr>
</table>

Answer 3

It's a common practice to just add * { margin: 0; padding: 0;} at top of each css file instead of having to deal with overriding default padding and margin values everywhere.

http://jsfiddle.net/50cg5fyj/