Border spacing not working for the bottom

Question

I've got a 10x10 table and inside each <td> there is a 32x32px image. I want the whole cell to shrink to the size of the image so each cell is just next to the other one. However, I seem not able to remove the bottom margin/border/ whatever.

I've tried everything from using border-collapse to border, border-spacing works, however it only gets rid of the horizontal border, there is still a border at the bottom. Inspecting the element shows that each cell td each row tr is 35.73px in height but 32px in width. Why isn't the height correct? How can I fix this? example

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

There shouldn't be those white stripes below each row. And the size should be reported as 32x32px.

Could you include the HTML in the question? – Ted Brownlow Aug 25 '19 at 03:19 — Ted Brownlow, Aug 25 '19 at 03:19

score 0 · Accepted Answer · answered Aug 25 '19 at 03:36

Since you didn't provide the html code i tried to mimic it myself. Adding font-size: 0; to td fixed it. Here's the working code:

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

Oh wow, I only needed to set ``font-size: 0`` really. This was driving me nuts, thanks. — , Aug 25 '19 at 03:39

Border spacing not working for the bottom

1 Answers1