5.1.1. —perdido, buscando el diseño ideal

Ignacio Marcos me pasa el meme del pequeño tip para CSS y yo lo tomo casi como un reto.

Supongamos que necesitamos armar un menú horizontal basado en una lista de elementos (UL > LI).

<ul>
	<li><a>foo</a>
	<li><a>bar</a>
	<li><a>dim</a>
</ul>
/* Saltos de linea agregados a propósito */

li {display: inline}

Si definen un fondo para los A, notarán que se muestra un espacio entre cada uno de ellos. Esto ocurre porque el salto de linea es mostrado como un espacio en blanco —existe en los navegadores una heurística para determinar cuándo debe agregarse un espacio. Ejemplo 1

Una de las soluciones sería modificar el código HTML original borrando los saltos de linea (y de paso se ahorrarían un problema con Internet Explorer en otras circunstancias). La otra es recurrir a la propiedad word-spacing.

word-spacing tiene un valor por defecto de 0; los valores negativos disminuyen el espacio entre palabras. La solución es definir un valor negativo (entre 0.2em y 0.3em).

ul {word-spacing:-0.3em;}
li {display:inline;}
a {background:lime;}

Ejemplo 2.

Dos consejos más:

• Definiendo un padding horizontal se mantiene el efecto (de fondo continuo) y se simula un poco de espacio entre palabras (para evitar que éstas queden superpuestas).
• Si uno de los A contiene dos palabras pueden volver a definir word-spacing: 0 para que se muestre un espacio normal entre palabras.

El ejemplo final sería:

ul {word-spacing:-0.3em;}
li {display:inline;}
a {
	background:lime;
	padding:0 0.3em;
	word-spacing:0;
	}

Ejemplo 3.