Как изменить этот макет таблицы на макет 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

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

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

Answer 2

Попробуйте

table.skinny { border-collapse:collapse; } 

EDIT: Если у вас есть одинокий образ в тд, display:block избавится от спускового пространства.

Кроме того, вы можете общаться с line-heighth1 и устанавливать его на 1 или что-то в этом роде.

Answer 3

попробовать это:

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

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

Answer 4

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

table.skinny { 
    border-spacing: 0; 
} 

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

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

Answer 5

Попробуйте

.skinny { поплавок: правый }