Ola, somos Arume

Desenvolvemos páxinas web, aplicacións para móbiles, capas de realidade aumentada e aplicacións para Facebook. Apaixónanos a informática e somos uns perfeccionistas incurables; por eso nos nosos proxectos utilizamos estándares.

tel. 625 519 694

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

Autenticarse

Rexistrarse. Esqueceches o teu contrasinal?

Etiquetas

Saltar as etiquetas

Subscríbete ás RSS

Estás en:

  • Inicio >
  • Blog >
  • Espazos en branco en listas con inline-block

Espazos en branco en listas con inline-block

21 Mai 2012 por Jose

Comentarios: 10

CSS

Un elemento ca propiedade CSS display: inline-block coloca os elementos en liña pero conservando as propiedades de bloque (alto, ancho, marxe, recheo, ...), pero cando establecemos unha lista co atributo display: inline-block aparece unha separación de 4 píxeles entre os elementos da mesma, que pode botar abaixo o deseño da nosa web. Neste artigos veremos distintas formas de solucionar este problema: unhas modificando o HTML e outras usando só CSS.

O código HTML no que nos basearemos para os exemplos será:

<ul>
	<li>Un</li>
	<li>Dous</li>
	<li>Tres</li>
</ul>

E o CSS:

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

Solucións únicamente con HTML

Reescribir os elementos da lista, colocándoos sen salto de liña

<ul>
	<li>Un</li><li>Dous</li><li>Tres</li>
</ul>
  • Un
  • Dous
  • Tres

Pechar os elementos dunha forma pouco elegante pero efectiva

<ul>
	<li>
	Un</li><li>
	Dous</li><li>
	Tres</li>
</ul>
  • Un
  • Dous
  • Tres

Engadir comentarios entre os elementos

<ul>
	<li>Un</li><!--
	--><li>Dous</li><!--
	--><li>Tres</li>
</ul>
  • Un
  • Dous
  • Tres

En HTML5: non pechar as etiquetas, xa que non é obrigatorio

<ul>
	<li>Un
	<li>Dous
	<li>Tres
</ul>

Solucións só con CSS

Engadir unha marxe negativa de 4 píxeles

ul li { margin-right: -4px; }
  • Un
  • Dous
  • Tres

Para tamaños de letra relativos, establecer o tamaño de letra do colector a 0

ul { font-size: 0; }
ul li { font-size: 14px; }
  • Un
  • Dous
  • Tres

Comentarios

10 comentarios. Comentar.

1. Anónimo o 20 Mar 2013 ás 02:37:47

Gracias! Me sirvió!

2. Héctor o 22 Mai 2013 ás 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 o 25 Nov 2013 ás 09:54:31

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

4. Anónimo o 11 Dec 2013 ás 23:10:00

Gracias!!

5. CSSYHTML5 o 14 Xan 2014 ás 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 o 14 Xan 2014 ás 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 o 16 Abr 2014 ás 12:31:12

Perfecta Ayuda... Felicitaciones.

9. Anónimo o 25 Xul 2016 ás 18:28:52

Excelente aporte

10. 53R610 o 17 Set 2016 ás 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 o 19 Ago 2017 ás 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

Podes comentar poñendo calquera nome ou alcume, exceptuando os nomes de usuarios rexistrados. Máximo de 50 caracteres.

Comentar como usuario rexistrado

Rexistrarse. Esqueceches o teu contrasinal?