Ardilla Quio Ardilla Quio

21 de Mayo de 2012

Espacios en blanco en listas con inline-block

Un elemento con la propiedad CSS display: inline-block coloca los elementos en línea pero conservando las propiedades de bloque (alto, ancho, margen, relleno, ...), pero cuando establecemos una lista con el atributo display: inline-block aparece una separación de 4 píxeles entre los elementos de la misma, que puede echar abajo el diseño de nuestra web. En este artículos veremos distintas formas de solucionar este problema: unas modificando el HTML y otras usando sólo CSS.

El código HTML en el que nos basaremos para los ejemplos será:

<ul>
	<li>Uno</li>
	<li>Dos</li>
	<li>Tres</li>
</ul>

Y el CSS:

ul li { background-color: #faf8f2; border: 1px solid #876823; display: inline-block; padding: 0 5px; }
  • Uno
  • Dos
  • Tres

Soluciones únicamente con HTML

Reescribir los elementos de la lista, colocándolos sin salto de línea

<ul>
	<li>Uno</li><li>Dos</li><li>Tres</li>
</ul>
  • Uno
  • Dos
  • Tres

Cerrar los elementos de una forma poco elegante pero efectiva

<ul>
	<li>
	Uno</li><li>
	Dos</li><li>
	Tres</li>
</ul>
  • Uno
  • Dos
  • Tres

Añadir comentarios entre los elementos

<ul>
	<li>Uno</li><!--
	--><li>Dos</li><!--
	--><li>Tres</li>
</ul>
  • Uno
  • Dos
  • Tres

En HTML5: no cerrar las etiquetas, ya que no es obligatorio

<ul>
	<li>Uno
	<li>Dos
	<li>Tres
</ul>

Soluciones sólo con CSS

Añadir un margen negativo de 4 píxeles

ul li { margin-right: -4px; }
  • Uno
  • Dos
  • Tres

Para tamaños de letra relativos, establecer el tamaño de letra del contenedor a 0

ul { font-size: 0; }
ul li { font-size: 14px; }
  • Uno
  • Dos
  • Tres

11 comentarios

Anónimo

31/12/2017 20:05:44

muchas gracias

Carlos

19/08/2017 13:42:19

Gracias, he usado font-size.

Considero que ésto es un problema de implementación de navegadores, no entiendo que en 2017 No lo hayan arreglado aún.

salu2.

53R610

17/09/2016 02:21:10

La solución del cambio de tamaño de la fuente es muy ingeniosa y polivalente (mi caso no era inline-block).

Anónimo

25/07/2016 18:28:52

Excelente aporte

Correnti Sergio

16/04/2014 12:31:12

Perfecta Ayuda... Felicitaciones.

Luis

14/01/2014 09:58:13

Hola CSSYHTML5.

De lo que trata el artículo es de un problema cuando quieres maquetar las listas con "display: inline-block". Si maquetas con "float: left" no vas a tener ese problema porque es otra forma de maquetar las listas. Tampoco tendrás ese problema si lo haces usando "display: inline".

Pero a veces, por la interacción con otros elementos o por el efecto que intentas conseguir, no puedes usar "float: left" (u otras técnicas) y tienes que usar esta. Si ese es el caso, en este artículo se habla de cómo solucionar el problema del margen entre elementos.

Para acabar quiero recordarte que hablar en mayúsculas es como si estuvieses gritando y es un falta de educación (virtual).

Un saludo.

CSSYHTML5

14/01/2014 00:26:03

lA SOLUCION NI ES NINGUNA DE LAS SEÑALADS ANTERIORMENTE LA VERDDADERA SOLUCION ES SIMPLEMENTE AÑADIR FLOAT: LEFT NADA MAS... º_º.................

Anónimo

11/12/2013 23:10:00

Gracias!!

Anónimo

25/11/2013 09:54:31

Gracias por este pequeño oasis de sabiduría.

Héctor

22/05/2013 11:30:27

Muy bueno.

He tenido que utilizar el sistema de poner todo en secuencial en el HTML, porque al quitar el márgen de 4 puntos (lo que estaba haciendo hasta ahora, que me he vuelto loco, he buscado y he llegado hasta aquí), se me veía distinto en Firefox que en Chromium .. los expedientes X que nos suelen ocurrir.

Un saludo y muchas gracias!

Anónimo

20/03/2013 02:37:47

Gracias! Me sirvió!

Comentario anónimo
Comentar como usuario