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
– Oded, Commented Feb 5, 2011 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
– joriki, Commented Feb 5, 2011 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
– Quentin, Commented Feb 5, 2011 at 10:15

Quentin · Accepted Answer · 2011-02-05 10:18:19Z

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 5, 2011 at 10:18

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nickolay Stavrogin Over a year ago

with vertical-align no-effect too.

Quentin Over a year ago

You are probably applying it to the wrong place, but the solution is still don't abuse tables for layout.

curv · Accepted Answer · 2011-02-05 10:07:35Z

0

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/

answered Feb 5, 2011 at 10:07

curv

3,8544 gold badges35 silver badges48 bronze badges

Collectives™ on Stack Overflow

CSS table cell padding, spacing

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related