Hola, somos Arume

Desarrollamos páginas web, aplicaciones para móviles, capas de realidad aumentada y aplicaciones para Facebook. Nos apasiona la informática y somos unos perfeccionistas incurables; por eso en nuestros proyectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Registrarse. ¿Has olvidado tu contraseña?

Etiquetas

Saltar las etiquetas

Suscríbete a las RSS

Estás en:

  • Inicio >
  • Blog >
  • Espacios en blanco en listas con inline-block

Espacios en blanco en listas con inline-block

21 May 2012 por Jose

Comentarios: 10

CSS

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

Comentarios

10 comentarios. Comentar.

1. Anónimo el 20 Mar 2013 a las 02:37:47

Gracias! Me sirvió!

2. Héctor el 22 May 2013 a las 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!

3. Anónimo el 25 Nov 2013 a las 09:54:31

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

4. Anónimo el 11 Dic 2013 a las 23:10:00

Gracias!!

5. CSSYHTML5 el 14 Ene 2014 a las 00:26:03

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

6. Luis el 14 Ene 2014 a las 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.

7. Correnti Sergio el 16 Abr 2014 a las 12:31:12

Perfecta Ayuda... Felicitaciones.

9. Anónimo el 25 Jul 2016 a las 18:28:52

Excelente aporte

10. 53R610 el 17 Sep 2016 a las 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).

11. Carlos el 19 Ago 2017 a las 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.

Comentar

Comentar de forma anónima

Puedes comentar poniendo cualquier nombre o apodo, exceptuando los nombres de usuarios registrados. Máximo de 50 caracteres.

Comentar como usuario registrado

Registrarse. ¿Has olvidado tu contraseña?