Demostración:
Sea el código:
Código HTML :
<!DOCTYPE html> <table style="border-collapse: collapse;"> <tr> <td style="border: 1px solid blue; margin: 0px; padding: 0px;"><img src="images/cuadro.png" style="border: none;"> <tr> <td style="border: 1px solid green; margin: 0px; padding: 0px;"><img src="images/cuadro.png" style="border: none;"> </table>
Donde "cuadro.png" es una imagen de 50 por 50 píxeles.
El código no hace más que poner una imagen encima de la otra cada una en una celda diferente, y cada celda tiene un borde de distinto color.
El doctype fuerza al navegador a usar el modo HTML5.
En todos los navegadores que soportan HTML5 en ambas celdas aparece un espacio en blanco de tres píxeles de alto justo abajo de la imagen.
Cuando se elimina la primera línea de código "<!DOCTYPE html>" el misterioso espacio en blanco desaparece y ambas imágenes aparecen una exactamente a continuación de la otra separadas solo por el borde de color de las celdas.
Esta curiosa ¿característica? hace que sea imposible mostrar una serie de imágenes en una tabla sin importar de cuántas filas y columnas, el misterioso espacio en blanco (o del color del fondo de la tabla) aparece rompiendo el diseño.
Probado en Chrome, FF, Safari y Opera.
Ahora bien, si se agrega "font-size: 0pt;" en el style de la table, el espacio en blanco se pone de un pixel de alto. Pero poniendo -1pt es un error por lo que el navegador ignora el tamaño y el espacio en blanco regresa a 2 píxeles.
Pregunta ¿por qué sucede esto?
