Desde que en mi empresa estamos dejando de echarle tanta cuenta a Internet Explorer 6, (ya iba siendo hora), vengo utilizando más a menudo en mis hojas de estilos el valor inline-block en la propiedad display. Gracias a este valor podemos darle algunas de las propiedades de los elementos en bloque a un elemento en línea, o viceversa.

¿Qué significa esto que acabo de decir? Pues lo explico ahora mismo: al aplicarle display: inline-block; a un elemento se le tratará como un elemento en línea, es decir, no tenderá a ocupar todo el ancho del contenedor ni empujará a los elementos contiguos hacia una nueva línea, amén de esas otras cosas que hacen los elementos en bloque. Será como cualquier otro SPAN, EM, etc. Pero, al contrario que los elementos en línea tradicionales, tendrá la amabilidad de dejarnos tocar cosas como su ancho, su alto, sus márgenes superiores e inferiores, etc.

Esto, que a primera vista puede parecernos una tontería, puede utilizarse para crear la rejilla sobre la que se sustentan nuestras web, que hasta ahora construimos a base de float y otras técnicas variadas. Desgraciadamente, cómo no, el soporte de inline-block no está tan extendido como quisiéramos. Internet Explorer sólo lo soporta de manera completa desde su versión 8 en adelante. En la versión 7 de este navegador el soporte está limitado a elementos que nativamente son elementos en línea, así que no se puede usar en DIV y demás, cosa que limita bastante su utilidad.

Existen hacks para paliar esta falta de soporte, pero yo personalmente no los recomiendo. Prefiero limitarme a usar este valor para display de la manera tradicional en situaciones menos comprometidas, como por ejemplo ajustar el alto de elementos en línea que tienen iconos colocados como imagen de fondo.

<!-- Código HTML -->
<span class="icon-edit">Lorem ipsum dolor sit amet</span>

/* Código CSS */
.icon-edit {
	background: url(edit.png) no-repeat 0 50%;
	display: inline-block;
	padding: 8px 0 8px 25px;
}

De este modo no hay que andar modificando el alto de línea del elemento para que la imagen de fondo se vea completamente (cosa que no mola mucho para la homogeneidad tipográfica del diseño y que además no funciona muy bien en todos los navegadores), únicamente tenemos que ajustar su padding por arriba y por abajo para dejar el espacio necesario a la imagen.