Recuerdo mucho una anécdota: hace años en un grupo de facebook alguien preguntó cual era la forma más sencilla de crear una galería de imágenes (en cuadricula). Mi respuesta fue:
<img src="tu-imagen.jpg">
<img src="tu-imagen2.jpg">
<img src="tu-imagen3.jpg">
<img src="tu-imagen4.jpg">
<img src="tu-imagen5.jpg">
<img src="tu-imagen6.jpg">
<img src="tu-imagen7.jpg">
<img src="tu-imagen8.jpg">
Y así según la cantidad que necesites.
Como era de esperarse, no faltaron las burlas (y los insultos) de quienes me trataban desde ser un troll hasta ser quien no conoce nada de CSS y HTML. Tuve que demostrarles que era un tema de teoría muy básica:
See the Pen Very simple image gallery (no CSS, no JS) by Alvaro Felipe (@AlvaroFelipe) on CodePen.
Pero ni así entendieron. El caso es que hay conceptos así de elementales que tienden a ser ignorados y que a la larga generan muchos dolores de cabeza. Por ejemplo, ¿por qué las imágenes generan esos espacios entre ellas, tanto verticales como horizontales? ¿Cómo es que sin una línea de CSS se puede crear una galería de imágenes responsive?
Las imágenes son elementos inline
Cuando un navegador dibuja un elemento en pantalla diferencia los elementos de bloque de los elementos de línea. Los elementos de bloque son cajas con alto ancho, padding, margin, etc. y que reservan todo el espacio horizontal disponible. Por otro lado los elementos de línea se comportan como texto, no tienen alto ni ancho, sino font-size y line-height. Y aunque aceptan margin y padding, solo aplican dentro de su línea (puesto que son elementos de línea). Ejemplo:
See the Pen Inline elements demostration by Alvaro Felipe (@AlvaroFelipe) on CodePen.
Las imágenes tienen una peculiaridad: son elementos de línea pero sí tienen alto y ancho pues están intrínsecas en la información del elemento (naturalWidth y naturalHeigth) o se pueden especificar con los atributos width y height pues técnicamente hablando una imagen es un elemento embebido (como un video o un iframe). Pero aún tienen propiedades como line-height y font-size (heredadas) que afectan la forma en que el navegador las renderiza. Pongamos el caso más conocido: un elemento de bloque que contiene a una imagen y el misterioso espacio fantasma inferior:
Si has entendido todo hasta este punto, sabrás que existen tres formas de solucionar este problema:
display: blocka la imagenline-height: 0al contenedorfont-size: 0al contenedor
El primer caso le quita todas las propiedas inline a la imagen y asunto resuelto. Los casos 2 y 3 ponen en cero las propiedades de texto que la imagen hereda y asunto resuelto también. Si has entendido la explicación hasta aquí vamos a un caso diferente (y que no se trata mucho): Un elemento inline que contiene a una imagen y también genera el misterioso espacio fantasma inferior (por ejemplo, un enlace que envuelve a una imagen):
Este caso es más molesto y confuso aún porque el enlace es un elemento de línea, por tanto no tiene altura y no envuelve completamente a la imagen (fíjate donde termina el borde rojo).
¿Cómo lo resolverías? Con la teoría explicada hasta el momento es bastante sencillo que respondas.
Caso práctico
Si estás creyendo que todo este post es solo teoría escondida que en la práctica casi nunca va a utilizarse te invito a mirar el siguiente ejercicio. Como ves, el contenedor .main-header tiene un display flex y las propiedades correctas para centrar tanto en vertical y en horizontal a sus hijos. Pero el logo no está centrado verticalmente. ¿Puedes centrarlo y explicar por qué?
See the Pen Centrado vertical de imagenes by Alvaro Felipe (@AlvaroFelipe) on CodePen.
Si quieres saber más de CSS tenemos cursos que te llevan desde cero hasta nivel maestro Jedi en este lenguaje: