Как изменить этот макет таблицы на макет CSS?

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, кажется, что вокруг каждой из ячеек таблицы есть нечто вроде «заполнения», которое создает пространство между изображением и текстом.

Что мне нужно сделать, чтобы сделать это макетом CSS, который помещает изображение непосредственно слева от текста без пробелов между ними?

Я пробовал это:

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

Но это помещает изображение поверх текста.

Answer 1

Попробуйте

table.skinny { border-collapse:collapse; }

РЕДАКТИРОВАТЬ: ЕСЛИ у вас есть одинокое изображение в тд, display:block избавится от места спуска.

Кроме того, вы можете связываться с line-height из h1 и установить его на 1 или что-то еще.

Answer 2

попробуйте это:

div.skinny {
   display: inline-block;
   vertical-align: middle;
}   

играть с этим здесь: http://jsfiddle.net/SebastianPataneMasuelli/qAjkv/

Answer 3

В исходном макете измените ширину второго тд на *. Происходит следующее: таблица и строка имеют фиксированную ширину для заполнения, и механизм размещения разделяет ее между ячейками.

Если вы хотите использовать div, то, как говорит Себастьян, используйте display: inline-block.

Answer 4

Попробуйте

.skinny {float: right}

Answer 5

Это что-нибудь делает?

table.skinny {
    border-spacing: 0;
}

И хотя это не по теме, несколько нулей имеют тот же эффект, что и один ноль:

.skinny
{
    margin: 0;
    padding: 0;
    border-style: none;
}