CODEWITHSUNDEEP
csshtml-tablepaddingspacingcellspacing
Nickolay Stavrogin
Nickolay Stavrogin

Reputation: 77

CSS table cell padding, spacing

<!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?

Upvotes: 1

Views: 4227

Answers (2)

Quentin
Quentin

Reputation: 943579

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.

Upvotes: 1

curv
curv

Reputation: 3844

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/

Upvotes: 0

Related Questions