Почему в моей ячейке таблицы есть отступы, хотя я установил ее нет?

Question

Я создал skinny класс CSS, который не имеет полей, отступов или рамок:

.skinny
{
    margin:0 0 0 0;
    padding:0 0 0 0;
    border:0 0 0 0;
}

И я применил его к строке, содержащей изображение, к которому также применен класс skinny:

<td width="33%" align="center" class="skinny">
    <table width="400px" height="180px" class="skinny">
        <tr class="skinny">
            <td class="skinny" width="60px" height="100px"><a class="skinny" href="/"><img class="skinny" width="60px" height="100px" id="snapshot" src="/images/snapshot.png"></a></td>
            <td class="skinny" width="120px" height="100px"><a class="skinny" href="/"><h1 class="skinny">Product</h1></a></td>
        </tr>
    </table>
</td>

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

Но независимо от того, к скольким элементам я применяю класс skinny, кажется, что вокруг каждой из ячеек таблицы есть нечто вроде «заполнения», которое создает пространство между изображением и текстом.

Как мне это убрать?

Answer 1

Это не может быть дополнение просто попробуйте это

border-collapse:collapse;

Answer 2

сам стол тоже дают отступы. поэтому определение таблицы должно быть

<table width="400px" height="180px" class="skinny" cellspacing="0" cellpadding="0">

Answer 3

У меня была та же проблема, и гуглил часами. Проблема была с установкой высоты на td элементах. Если высота контента составляет 60px, а высота td - 120px, то сверху и снизу будет добавлено 30px.

Таким образом, правильный ответ будет:

<td width="33%" align="center" class="skinny">
    <table width="400px" height="180px" class="skinny">
        <tr class="skinny">
            <td class="skinny" width="60px"><a class="skinny" href="/"><img class="skinny" width="60px" height="100px" id="snapshot" src="/images/snapshot.png"></a></td>
            <td class="skinny" width="120px"><a class="skinny" href="/"><h1 class="skinny">Product</h1></a></td>
        </tr>
    </table>
</td>

(высота снята)

Answer 4

Добавьте это к своим tr 's & td' *

cellpadding="0"
cellspacing="0"

Answer 5

Сжимающиеся поля

Поздно на вечеринке, но это потому, что ваш тег h1, скорее всего, имеет некоторые поля сверху или снизу. Поля сворачиваются до самого верхнего элемента в dom, пока не найдет элемент с padding-top или padding-bottom, который не равен 0 (это прерывает свертывание). Это очень раздражающая черта.

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

Answer 6

Изображения являются встроенными элементами и располагаются на базовой линии, они обрабатываются как буквы без спуска (то есть как a, b и c, но не g, j и y).

Установите изображениена display: block, чтобы избежать этого (или повернуть с помощью vertical-align)

Еще лучше, поскольку похоже, что у вас есть таблица 1x2: не используйте таблицы для макета

Answer 7

/ * Удалить отступы и поля * /

*  
    { 
    margin: 0; 
    padding: 0; 
    border: 0; 
}