Ячейки таблицы больше, чем они должны быть

Question

Я создал систему карт для игры, которая работает по принципу рисования изображения карты из тайлов. Для этого есть много причин, о которых я не буду здесь говорить, но если вы действительно хотите это знать, я уверен, что вы сможете узнать, как связаться со мной;)

Я выпустил последнюю версию , чтобы вы могли точно определить, в чем проблема и источник. Проблема в том, что между двумя верхними плитками и двумя нижними плитками есть грань, я не могу понять, почему это так, и любая помощь будет признательна.

В источнике есть маркер «stackoverflow», если при поиске источника вы ищете «stackoverflow», он должен привести вас к рассматриваемой таблице.

Я также загрузил изображение проблемы .

Answer 1

Я думаю, вам нужно использовать display: block на ваших изображениях. Когда изображения имеют размер inline, для межстрочного интервала остается немного дополнительного пространства.

Answer 2

Вы также можете настроить высоту строки элемента td:

td {
    line-height: 0
}

Answer 3

Я знаю, что это может звучать плохо, но вам нужно убедиться, что между конечным тегом <img> и началом конечного тега </td> нет.

т.е. Следующее представит проблему:

<td>
 <img src="image.jpg"/>
</td>

И это не будет:

<td><img src="image.jpg"/></td>

Надеюсь, это поможет.

Редактировать: ОК, это не было решением вообще. DOH!

Answer 4

Я не все посмотрел, но проблема лежит где-то в таблицах стилей.

Если вы скопируете только часть таблицы, карта будет отображаться правильно.

Если вы удалите последний тег </span> из этой части, он также будет работать (однако страница будет смешана):

<div class="inner"><span class="corners-top"><span></span></span>
<div class="content" style="font-size: 1.1em;">

<!-- Stackoverflow findy thingy -->
<table border="0" cellspacing="0" cellpadding="0">

Так что либо попробуйте с самого начала с помощью css, либо попробуйте удалить их один за другим, чтобы увидеть, что является причиной проблемы.