边框间距不适用于底部

Question

我有一个 10x10 table 并且每个 <td> 里面有一个 32x32px 的图像。我希望整个单元格缩小到图像的大小，以便每个单元格都紧挨着另一个单元格。但是，我似乎无法删除底部的 margin/border/ 任何东西。

从border-collapse到border我都试过了，border-spacing都可以，但是它只是去掉了水平边框，底部还有边框。检查元素显示每个单元格 td 每行 tr 的高度为 35.73px，宽度为 32px。为什么高度不对？我怎样才能解决这个问题？

*{
margin: 0px 0px 0px 0px !important; padding: 0px 0px 0px 0px !important;
}
table{
border-spacing: 0px 0px; border-collapse:separate;
}

<!doctype html>
<html>
   <head>
      <style>*{margin: 0px 0px 0px 0px !important; padding: 0px 0px 0px 0px !important;}table{border-spacing: 0px 0px; border-collapse:separate;}</style>
      <meta charset="utf-8">
      <title>HTTP Adventure</title>
   </head>
   <body>
      <h1>HI! This is the index page, there are currently 1 users connected!</h1>
      <table>
         <tr>
            <td id="tile_1-1"><img src="/res/tiles/black.bmp"></td>
            <td id="tile_1-2"><img src="/res/tiles/black.bmp"></td>
            <td id="tile_1-3"><img src="/res/tiles/black.bmp"></td>
         </tr>
         <tr>
            <td id="tile_2-1"><img src="/res/tiles/black.bmp"></td>
            <td id="tile_2-2"><img src="/res/tiles/black.bmp"></td>
            <td id="tile_2-3"><img src="/res/tiles/black.bmp"></td>
         </tr>
         <tr>
            <td id="tile_3-1"><img src="/res/tiles/black.bmp"></td>
            <td id="tile_3-2"><img src="/res/tiles/black.bmp"></td>
            <td id="tile_3-3"><img src="/res/tiles/black.bmp"></td>
         </tr>
      </table>
   </body>
</html>

每行下方不应该有那些白色条纹。尺寸应报告为 32x32px。

Answer 1

由于您没有提供 html 代码，我试图自己模仿它。添加 font-size: 0; 到 td 修复了它。这是工作代码：

* {
margin: 0;
padding: 0;
}
table {
border-spacing: 0;
border-collapse: separate;
}
td {
    background: black;
    font-size: 0;
}

<table>
<tr><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td></tr><tr><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td></tr><tr><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td></tr><tr><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td></tr><tr><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td></tr><tr><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td></tr><tr><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td></tr><tr><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td></tr><tr><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td></tr><tr><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td><td><img height="32" width="32"></td></tr>
</table>

边框间距不适用于底部

Border spacing not working for the bottom

html

css

border-spacing