HTML таблица (tr, td) частично игнорирует заполнение CSS

Question

У меня есть таблица с 2 ячейками и двумя строками.Внутри этих клеток есть изображение.У меня есть правило CSS для удаления всех полей и отступов внутри них:

table, tr, td, img {
   margin:0; padding:0; /* adding !important won't change anything since no other css rules conflict with this one */
}

Однако на практике это не работает.Поля правильно удалены со всех сторон, кроме нижней.Иллюстрация проблемы:

Как вы можете видеть, td STILL имеет отступ ниже, даже если правило активно (слева от иллюстрации).Я чешу голову здесь - какой-нибудь совет?

РЕДАКТИРОВАТЬ: Скрипка

Answer 1

Добавить vertical-align:middle;.

Демо

Answer 2

Добавить CSS

 img {
      vertical-align:bottom;
     }

Answer 3

Добавить CSS

td img { display:block }

Демо: http://jsfiddle.net/QLfyD/2/

Answer 4

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

Оказалось, что был максимум- ширина, установленная на изображении, которая вызывала проблемы с вычислением ширины ячейки, удаление максимальной ширины на изображении решило проблему для меня.

Надеюсь, это может помочь кому-то еще в будущем.