CSS 表格单元格填充、间距

发布于 2024-10-16 00:35:35 字数 1195 浏览 4 评论 0原文

<!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 声明一切正常,但在 ie 中没有任何变化。

如何正确删除填充?

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

空城仅有旧梦在 2024-10-23 00:35:36

那不是填充。图像是内联元素,因此它们被像字母一样对待。默认情况下,vertical-align 设置为使图像的底部与 a、b、c 和 d 等字母的底部对齐。这为 j、g、p 和 y 等字母上的下降部分留出了空间。

您可以使用 vertical-align 属性,但您不应该使用 表格进行布局 首先。

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.

一念一轮回 2024-10-23 00:35:36

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

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/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文