时间戳

首页 > 解决方案 > 边框间距不适用于底部

html - 边框间距不适用于底部

问题描述

我有一个 10x10 的表格，每个表格里面都有<td>一个 32x32px 的图像。我希望整个单元格缩小到图像的大小，这样每个单元格就在另一个单元格旁边。但是，我似乎无法删除底部边距/边框/任何东西。

我已经尝试了从 usingborder-collapse到 的所有方法border，border-spacing但它只是摆脱了水平边框，底部仍然有一个边框。检查元素显示每个单元格td每行tr的高度为 35.73 像素，宽度为 32 像素。为什么高度不正确？我怎样才能解决这个问题？ 例子

*{
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。

标签： htmlcssborder-spacing

解决方案

由于您没有提供 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>

推荐阅读