Eliminar espacios blancos de display: inline-block

Quizás en más de una ocasión nos hemos encontrado con el problema de que, cuando estamos usando la propiedad display:inline-block para, por ejemplo, alinear un menú horizontalmente, nos deja espacios en blanco entre un item y otro, veamos cómo solucionarlo.

Podemos ver un ejemplo de cómo quitar los espacios en blanco al display:inline-block.

Bien, ahora pasamos a explicar el sencillo ‘truco’ que hemos realizado:

.sin_modificar ul li{
	display: inline-block;
	background: red;
}

.modificado ul{
	font-size: 0;
}

.modificado ul li{
	display: inline-block;
	background: yellow;
	font-size: 16px;
}

Para el nav con clase ‘sin_modificar’ no hay mucho que explicar. Sin embargo, para la clase ‘modificado’, lo que hacemos es ponerle al ‘ul’ un tamaño de fuente de 0, y, posteriormente, a los elementos ‘li’ le damos un tamaño de fuente de 16px, con ello conseguimos quitar el espacio en blanco entre un item y otro.

Sencillo, ¿verdad?

Espero que os sea de utilidad.

HackSaludos!

• CSS3