Pourquoi la cellule de ma table semble-t-elle avoir un remplissage même si je ne l'ai pas réglé?

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.

Comment puis-je supprimer cela?

Answer 1

la table elle-même donne également un rembourrage. donc la définition de la table doit être

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

Answer 2

/* Retirer le rembourrage et la marge */

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

Answer 3

Les images sont des éléments en ligne et asseyez-vous sur la ligne de base, ils sont traités comme une lettre sans descendant (c'est-à-dire comme a, b et c mais pas g, j et y).

Réglez l'image à display: block pour éviter ce (ou Tripotez vertical-align)

Mieux encore, car il semble que vous avez une table 1x2: ne pas utiliser des tables pour la mise en page

Answer 4

Il peut ne pas être rembourrage juste essayer cette

border-collapse:collapse; 

Answer 5

marges Collapsing

En retard à la fête mais c'est parce que votre balise h1 a très probablement des marges supérieures ou inférieures. Les marges s'effondrent tout au long jusqu'à l'élément le plus haut dans le dom jusqu'à ce qu'il trouve un élément avec padding-top ou padding-bottom qui n'est pas égal à 0 (ceci interrompt l'effondrement). C'est une caractéristique très exaspérante.

Les marges qui s'affichent reviennent toujours me mordre quand je m'y attends le moins et il est très difficile de déboguer.

Answer 6

Ajouter à votre s 's & td' tr

cellpadding="0" 
cellspacing="0" 

Answer 7

j'avais même question, et googlé pendant des heures. Le problème était avec le réglage de la hauteur sur td éléments. Si la hauteur du contenu est 60px et que la hauteur du td est 120px, il y aura 30px padding en haut et en bas chacun.

Donc, la bonne réponse sera:

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

(hauteur retirée)