¿Por qué la celda de mi tabla parece tener relleno a pesar de que no lo configuré?

Question

creé una clase skinny CSS que no tiene margen, relleno o borde:

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

Y lo aplicaron a una fila que contiene una imagen que también tiene la clase skinny que se le aplica:

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

Estoy tratando de que la imagen aparezca lo más cerca posible del texto <h1> en la celda siguiente para que se empujen una contra la otra, de izquierda a derecha.

Pero no importa a cuántos elementos aplique la clase skinny, parece que hay algo así como un "relleno" alrededor de cada una de las celdas de la tabla que crea un espacio entre la imagen y el texto.

¿Cómo elimino eso?

Answer 1

la mesa en sí misma también da relleno. por lo que la definición de la tabla es necesario que haya

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

Answer 2

/* Retire relleno y el margen */

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

Answer 3

Las imágenes son elementos en línea y sentarse en la línea de base, que son tratados como una carta sin Descensor (es decir, como a, b y c pero no g, j e y).

Ajuste la imagen para display: block para evitar esto (o juguetear con vertical-align)

Mejor aún, ya que parece que tiene una tabla 1x2: no utilice tablas para maquetar

Answer 4

Puede El relleno no se sólo tratar este márgenes

border-collapse:collapse; 

Answer 5

Collapsing

Tarde para la fiesta pero es porque su etiqueta h1 probablemente tenga algunos márgenes arriba o abajo. Los márgenes se colapsan hasta llegar al elemento más superior en el dom hasta que encuentra un elemento con relleno superior o relleno inferior que no es igual a 0 (esto interrumpe el colapso). Es una característica muy exasperante.

Los márgenes de contracción siempre vuelven para morderme cuando menos lo espero y es muy difícil de depurar.

Answer 6

Agregar a su tr 's & td' s

cellpadding="0" 
cellspacing="0" 

Answer 7

tuve misma edición, y buscado en Google durante horas. El problema fue con la configuración de altura en elementos td. Si la altura del contenido es de 60 px, y la altura de td es de 120 px, habrá un relleno de 30 píxeles en la parte superior e inferior de cada uno.

Así que la respuesta correcta será:

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

(altura eliminado)