Table cells larger than they are meant to be

Question

I've created a map system for a game that runs on the principle of drawing the picture of the map from tiles. There are many reasons for this which I won't go into here but if you really want to know then I'm sure you can find out how to contact me ;)

I have made the latest version live so you can see exactly where the problem lies and the source. The issue is the line between the top 2 tiles and the bottom 2 tiles, I can't figure out why it's gone like this and any help would be appreciated.

In the source is a marker called "stackoverflow", if you search for "stackoverflow" when viewing source then it should take you to the table in question.

I have also uploaded an image of the issue.

Answer 1

I think you need to use display: block on your images. When images are inline there's a little extra space for the line spacing.

Answer 2

You could also adjust the line height of the td element:

td {
    line-height: 0
}