¿Como solucionar los espacios entre los elementos inline-block?

publicado por: Anonymous

Cuando uso elementos con la propiedad inline-block me aparece un espacio entre los elementos:

_x000D_

_x000D_

html, body { margin: 0; padding: 0; }_x000D_
_x000D_
.padre .hijo {_x000D_
  display: inline-block;_x000D_
  padding: 5px;_x000D_
  background-color: red;_x000D_
}

_x000D_

<div class="padre">_x000D_
  <div class="hijo">Hijo 1</div>_x000D_
  <div class="hijo">Hijo 2</div>_x000D_
  <div class="hijo">Hijo 3</div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

¿Por que pasa esto y hay alguna manera de eliminar este efecto?

solución

El comportamiento de los espacios es parte de los elementos inline y inline-block.

Por defecto a los elementos inline se les aplican las propiedades letter-spacing y word-spacing (Ver índice de propiedad) las cuales dependen del tamaño font-size que heredan del elemento padre y al estar los elementos en cada linea por separado, se genera al renderizar el DOM un espacio blanco (visualizado con un _:

<div class="hijo">Hijo 1</div>_
<div class="hijo">Hijo 2</div>_
<div class="hijo">Hijo 3</div>_

Vamos a ver ahora multitudes soluciones que le puedes dar al problema para eliminar los espacios en el DOM o con reglas en el CSS:

#1. Quitar los espacios entre los elementos:

  • Pro: No se necesita ninguna regla adicional en el CSS
  • Contra: No es legible y difícil de mantener el código

_x000D_

_x000D_

html, body { margin: 0; padding: 0; }_x000D_
_x000D_
.padre .hijo {_x000D_
  display: inline-block;_x000D_
  padding: 5px;_x000D_
  background-color: red;_x000D_
}

_x000D_

<!-- Ejemplo #1 -->_x000D_
_x000D_
<div class="padre">_x000D_
  <div class="hijo">Hijo 1</div><div class="hijo">Hijo 2</div><div class="hijo">Hijo 3</div>_x000D_
</div>_x000D_
_x000D_
<br><!-- Ejemplo #2 -->_x000D_
_x000D_
<div class="padre">_x000D_
  <div class="hijo">_x000D_
  Hijo 1_x000D_
  </div><div class="hijo">_x000D_
  Hijo 2_x000D_
  </div><div class="hijo">_x000D_
  Hijo 3_x000D_
  </div>_x000D_
</div>_x000D_
_x000D_
<br><!-- Ejemplo #3 (trasladamos el '>' del cierre a la próxima linea -->_x000D_
_x000D_
<div class="padre">_x000D_
  <div class="hijo">_x000D_
  Hijo 1_x000D_
  </div_x000D_
  ><div class="hijo">_x000D_
  Hijo 2_x000D_
  </div_x000D_
  ><div class="hijo">_x000D_
  Hijo 3_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_


#2. Añadir comentarios (vacíos):

  • Pro: No se necesita ninguna regla adicional en el CSS
  • Contra: Puede ser molesto al escribir/leer

_x000D_

_x000D_

html, body { margin: 0; padding: 0; }_x000D_
_x000D_
.padre .hijo {_x000D_
  display: inline-block;_x000D_
  padding: 5px;_x000D_
  background-color: red;_x000D_
}

_x000D_

<div class="padre">_x000D_
     <div class="hijo">Hijo 1</div><!--_x000D_
  --><div class="hijo">Hijo 2</div><!--_x000D_
  --><div class="hijo">Hijo 3</div>_x000D_
</div>

_x000D_

_x000D_

_x000D_


#3. Establecemos el tamaño de fuente font-size a cero

  • Pro: No se necesita ninguna modificación en el DOM
  • Contra: Hay que añadir nuevas reglas al CSS

_x000D_

_x000D_

html, body { margin: 0; padding: 0; }_x000D_
_x000D_
.padre {_x000D_
  font-size: 0; /* Reducimos */_x000D_
}_x000D_
_x000D_
.padre .hijo {_x000D_
_x000D_
  font-size: 1rem; /* Restablecemos */_x000D_
 _x000D_
  display: inline-block;_x000D_
  padding: 5px;_x000D_
  background-color: red;_x000D_
}

_x000D_

<div class="padre">_x000D_
  <div class="hijo">Hijo 1</div>_x000D_
  <div class="hijo">Hijo 2</div>_x000D_
  <div class="hijo">Hijo 3</div>_x000D_
</div>

_x000D_

_x000D_

_x000D_


#4. Arreglo white-space con margin

  • Pro: No se necesita ninguna modificación en el DOM
  • Contra: Hay que añadir nuevas reglas al CSS

_x000D_

_x000D_

html, body { margin: 0; padding: 0; }_x000D_
_x000D_
.padre .hijo {_x000D_
_x000D_
  margin-right: -4px;_x000D_
 _x000D_
  display: inline-block;_x000D_
  padding: 5px;_x000D_
  background-color: red;_x000D_
}

_x000D_

<div class="padre">_x000D_
  <div class="hijo">Hijo 1</div>_x000D_
  <div class="hijo">Hijo 2</div>_x000D_
  <div class="hijo">Hijo 3</div>_x000D_
</div>

_x000D_

_x000D_

_x000D_


#5. Restamos en letter-spacing

  • Pro: No se necesita ninguna modificación en el DOM
  • Contra: Hay que añadir nuevas reglas al CSS

_x000D_

_x000D_

html, body { margin: 0; padding: 0; }_x000D_
_x000D_
.padre {_x000D_
   letter-spacing: -1em; /* Restamos */_x000D_
}_x000D_
_x000D_
.padre .hijo { _x000D_
_x000D_
  letter-spacing: normal; /* Vuelta a lo normal */ _x000D_
  _x000D_
  display: inline-block;_x000D_
  padding: 5px;_x000D_
  background-color: red; _x000D_
}

_x000D_

<div class="padre">_x000D_
  <div class="hijo">Hijo 1</div>_x000D_
  <div class="hijo">Hijo 2</div>_x000D_
  <div class="hijo">Hijo 3</div>_x000D_
</div>

_x000D_

_x000D_

_x000D_


#6. flex in the house (gracias a los navegadores modernos)

  • Pro: No se necesita ninguna modificación en el DOM
  • Contra: Hay que añadir nuevas reglas al CSS

_x000D_

_x000D_

html, body { margin: 0; padding: 0; }_x000D_
_x000D_
.padre {_x000D_
   display: flex;_x000D_
}_x000D_
_x000D_
.padre .hijo { _x000D_
  display: inline-block;_x000D_
  padding: 5px;_x000D_
  background-color: red; _x000D_
}

_x000D_

<div class="padre">_x000D_
  <div class="hijo">Hijo 1</div>_x000D_
  <div class="hijo">Hijo 2</div>_x000D_
  <div class="hijo">Hijo 3</div>_x000D_
</div>

_x000D_

_x000D_

_x000D_


Fuentes:

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *