Comment changer cette mise en page en une mise en page CSS?

Question

J'ai créé une skinny classe CSS qui n'a pas margin, padding ou frontière:

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

Et je l'ai appliqué à une ligne contenant une image qui a aussi la classe skinny qui lui est appliquée:

<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> 

J'essaie d'obtenir que l'image apparaisse aussi près que possible du texte <h1> dans la cellule suivante afin qu'ils soient poussés les uns contre les autres, de gauche à droite.

Mais peu importe combien d'éléments j'applique la classe skinny à, il semble y avoir quelque chose comme un «remplissage» autour de chacune des cellules du tableau qui crée un espace entre l'image et le texte.

Que devrais-je faire pour que cette mise en page CSS place l'image directement à gauche du texte sans espace entre les deux?

J'ai essayé ceci:

<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> 

Mais il met l'image au-dessus du texte.

Answer 1

Dans la mise en page d'origine, modifiez la largeur du second td en *. Qu'est-ce qui se passe est que la table, et donc la ligne, a une quantité fixe de largeur à remplir, et le moteur de mise en page le partage entre les cellules.

Si vous voulez utiliser les divs, alors, comme le dit Sebastian, utilisez display: inline-block.

Answer 2

Essayez

table.skinny { border-collapse:collapse; } 

EDIT: Si vous avez une image seule dans un td, display:block va se débarrasser de l'espace de descendeur.

En outre, vous pouvez jouer avec le line-height du h1 et le régler à 1 ou quelque chose.

Answer 3

essayez ceci:

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

jeu avec ici: http://jsfiddle.net/SebastianPataneMasuelli/qAjkv/

Answer 4

Est-ce quelque chose?

table.skinny { 
    border-spacing: 0; 
} 

Et bien qu'il est hors-sujet, plusieurs zéros ont le même effet que seulement un zéro:

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

Answer 5

Essayez

.skinny { float: right }