CSS表格单元格填充,间距

时间:2011-02-05 10:02:00

标签: css html-table padding spacing cellspacing

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

在上一首歌和ie8中,我看到:http://eta.name/timages/padding.png

如果我在Opera中卸载DOCTYPE声明一切正常,但是没有任何改变。

如何删除填充正确?

我简化了示例: http://eta.name/padding.html 有TD问题。顶部有一个像素,单元格底部有一些像素。如何删除?

2 个答案:

答案 0 :(得分:1)

这不是填充。图像是内联元素,因此它们被视为字母。默认设置为vertical-align,因此图像的底部与a,b,c和d等字母的底部对齐。这会留下您在j,g,p和y等字母上找到的下降器的下方空间。

您可以使用vertical-align属性,但您不应该首先使用tables for layout

答案 1 :(得分:0)

我会以不同的方式接近它。不要像这样对抗每个浏览器,而是使用CSS重置,这样您就可以完全控制所有元素,并可以根据需要自由设置样式。我所知道的最好的是Eric Mayer的http://meyerweb.com/eric/tools/css/reset/