CSS table cell padding, spacing

Question

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd">
<html>
  <head>
    <style type="text/css">
      table {
       border: 0;
       padding: 0; 
       border-collapse: collapse;
      }
      td {padding: 0}
    </style>
  </head>
  <body>
    <table bgcolor="gray" width="100%">
      <tr>
        <td bgcolor="black" height="14px">
          <img src="_images/top_top_line.png" width="800px" height="14px" border="0" alt="">
        </td>
      </tr>
      <tr>
        <td height="14px">
          <img src="_images/top_top_line.png" width="800px" height="14px" alt="">
        </td>
      </tr>
   </table>
  </body>
</html>

In last opera and ie8 I see: http://eta.name/timages/padding.png

If I remover DOCTYPE declaration in Opera all ok, but in ie nothing changes.

How remove padding correct?

I have simplified example: http://eta.name/padding.html There is TD problem. One pixel on top and some on bottom in cell. How to remove this?

You have not removed spacing, even though your title suggests that you did. Nor have you specified any _units_ to these, as you must. — Oded, Feb 05 '11 at 10:06
I think you'll have to elaborate and provide information such as what is the intended behaviour, in which circumstances you got the intended behaviour, in which circumstances you didn't get it, and what you got instead. — joriki, Feb 05 '11 at 10:07
@Oded — the lengths that don't have units are all `0`, you don't need to specify units for lengths of 0 (since 0 is always 0). OTOH, there is a bunch of places in the HTML where heights and widths are specified, and these do have units, but should not. Those attributes either take an integer (giving a pixel value) or a percentage. `px` should **not** appear there. — Quentin, Feb 05 '11 at 10:15

score 1 · Answer 1 · answered Feb 05 '11 at 10:18

1

That isn't padding. Images are inline elements, so they get treated like letters. By default the vertical-align is set so the bottom of the image lines up with the bottom of letters like a, b, c, and d. This leaves room below for the descenders you find on letters like j, g, p and y.

You can twiddle with the vertical-align property, but you should just not use tables for layout in the first place.

answered Feb 05 '11 at 10:18

Quentin

914,110
126
1,211
1,335

with vertical-align no-effect too. – Nickolay Stavrogin Feb 05 '11 at 10:39
You are probably applying it to the wrong place, but the solution is still **don't abuse tables for layout**. – Quentin Feb 05 '11 at 12:17

score 0 · Answer 2 · answered Feb 05 '11 at 10:07

I would approach it a different way. Instead of battling against each browser like this, use a CSS reset so you have full control over all elements and are free to style as you wish. The best I know of is Eric Mayer's http://meyerweb.com/eric/tools/css/reset/

CSS table cell padding, spacing

2 Answers2