如何將此表格佈局更改爲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的寬度更改爲*。發生的事情是，表格和行，具有固定的寬度來填充，佈局引擎在單元之間共享。

如果您想使用div，那麼就像Sebastian說的那樣，使用display: inline-block。

Answer 2

嘗試

table.skinny { border-collapse:collapse; } 

編輯：如果你有一個TD一個孤獨的形象，display:block將擺脫下降器空間。

此外，你可以混淆h1的line-height，並將其設置爲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 { 浮動：權 }