Eliminar el espacio en blanco (Gap) entre elementos de bloque en línea con CSS

¿Estás intentando crear una cuadrícula en línea con tus propias reglas CSS utilizando el modo de visualización de bloques en línea? Probablemente estés frustrado y te preguntes "¿¡Por qué diablos hay un espacio entre mis elementos !?". Aunque tu CSS puede ser muy simple, siempre tendrás un espacio entre sus elementos HTML con la pantalla: estilo de bloque en línea. Considere el siguiente fragmento:

<div class="header">
    <div class="head-item">1</div>
    <div class="head-item">2</div>
    <div class="head-item">3</div>
    <div class="head-item">4</div>
    <div class="head-item">5</div>
</div>
<style>
.head-item {
    width: 50px;  
    height: 50px;
    text-align: center;
    display: inline-block;
    border: 1px solid gray;
}
</style>

¿Ya imaginaste cómo debería verse? Bueno, con una imaginación CSS normal, nuestra expectativa es :

Sin embargo, obtendrás en su lugar el siguiente resultado:

En caso de que no lo hayas notado tampoco, hay un espacio en blanco (en la segunda fila resaltada en azul con un editor de imágenes) entre cada div con la clase head-item. Según nuestro estilo, tenemos bloques simples de 50x50 cuyo texto está centrado y su borde es gris. ¿Entonces cuál es el problema? El marcado, incluso ejecutado dentro de un entorno sin otras reglas CSS, siempre mostrará un espacio entre cada div con bloque en línea. Esto en sí mismo no es un error, sino el comportamiento esperado de un elemento que usa display: inline-block. 

Para resolver este problema fácilmente, si el objetivo es crear un grupo en línea de divs, sería establecer la propiedad flotante de la clase a la izquierda:

.head-item {
    float: left;
    width: 50px;  
    height: 50px;
    text-align: center;
    border: 1px solid gray;
}

Esto produciría inmediatamente nuestra cuadrícula deseada. Sin embargo, esto puede no ser útil en sus casos y no funcionar con otros estilos. En este artículo compartiremos contigo posibles soluciones que puedes aplicar en tu proyecto frente a este problema.

1. Elimine los espacios en blanco entre las etiquetas HTML.

La primera y más conocida solución para resolver este problema es recortar cada espacio entre los elementos HTML que tienen la propiedad display: inline-block, por ejemplo si eliminamos los espacios de nuestro marcado inicial, tendríamos ahora:

<div class="header"><div class="head-item">1</div><div class="head-item">2</div><div class="head-item">3</div><div class="head-item">4</div><div class="head-item">5</div></div>

La rebaja anterior (la misma pero sin espacios entre las etiquetas html) mostraría con éxito nuestro resultado deseado de divs en una fila sin espacios en blanco:

Como puedes ver, no necesitamos agregar estilos adicionales, solo eliminar los espacios en blanco entre los elementos. Si desea utilizar esta solución, probablemente si no quiere problemas con otros programadores sobre lo complicado que es su código, entonces puede querer hacerlo usando el lenguaje de su servidor, por ejemplo, con PHP:

<?php

$html = $text = <<<EOT
<div class="header">
    <div class="head-item">1</div>
    <div class="head-item">2</div>
    <div class="head-item">3</div>
    <div class="head-item">4</div>
    <div class="head-item">5</div>
</div>
EOT;

$html = preg_replace('/(\>)\s*(\<)/m', '$1$2', $html);

echo $html;

2. Elimina los espacios en blanco entre las etiquetas HTML mediante comentarios

Esta solución es teóricamente la misma que la primera, sin embargo, no necesitará tener su rebaja en una sola línea, en su lugar, abra un comentario desde el punto donde termina su elemento y cierre el comentario donde comienza el siguiente elemento.

<div class="header">
  <div class="head-item">1</div><!--
  --><div class="head-item">2</div><!--
  --><div class="head-item">3</div><!--
  --><div class="head-item">4</div><!--
  --><div class="head-item">5</div>
</div>

3. Usar un margen negativo

La tercera solución es bastante más sencilla, aunque también puede dar lugar a resultados no deseados. Como tenemos un espacio entre los divs, puede eliminarlo usando una propiedad de margen negativo en su elemento:

<div class="header">
    <div class="head-item">1</div>
    <div class="head-item">2</div>
    <div class="head-item">3</div>
    <div class="head-item">4</div>
    <div class="head-item">5</div>
</div>
<style>
.head-item {
    width: 50px;  
    height: 50px;
    text-align: center;
    display: inline-block;
    border: 1px solid gray;
}

.head-item:not(:first-child) {
  margin-left: -4px;
}
</style>

4. Monkeypatch el tamaño de fuente principal a 0

El último método incluye una modificación curiosa y probablemente no sea la mejor opción para tu proyecto. Esta solución está relacionada con el tamaño de fuente del contenedor de sus elementos de bloque en línea, en este caso, debe establecer el font-sizede su contenedor en 0 (un espacio en blanco con tamaño de fuente 0 es igual a un elemento de ancho 0) y especificar la fuente -tamaño de los elementos secundarios. En nuestro caso con el marcado de ejemplo, necesitaríamos modificar el encabezado y la head-itemclase con los siguientes valores:

<div class="header">
    <div class="head-item">1</div>
    <div class="head-item">2</div>
    <div class="head-item">3</div>
    <div class="head-item">4</div>
    <div class="head-item">5</div>
</div>
<style>
.header {
  /* Set container font-size */
  font-size: 0;
}

.head-item {
    width: 50px;  
    height: 50px;
    text-align: center;
    display: inline-block;
    border: 1px solid gray;
    /* Force font-size of child elements */
    font-size: 16px;
}
</style>

Esto también solucionaría nuestro problema. El método a usar depende totalmente de usted. El bloque en línea es realmente útil en algunos escenarios, sin embargo, es importante saber también cómo lidiar con esa brecha molesta o aprender a vivir con ella.

Que te diviertas ❤️!