CSS table cell padding, spacing_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-08 22:41 出处：网络

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0//EN\" \"http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd\">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd">
<html>
  <开发者_StackOverflow;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?

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.

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/