5.1.1.

25 enero 2005

display: inline-block

Categorí­a

Esto solo será una pequeño comentario sobre el valor inline-block para display que fue introducido en la especificación CSS2.1.

La especificación define a inline-block:

This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.

Desmembrando un poco esa definición:

Generate a block box
O sea que las propiedades aplicables a un elemento con display: block son aplicables aquí también. Eso significa poder modificar las propiedades width, height, margin-top y margin-bottom. Un elemento con display: inline debe ignorar cualquier valor para esas propiedades, por lo que ya hay una ventaja.
is flowed as a single inline box
Cuando dice inline box está hablando de lineas de texto. La cita completa quiere decir que el elemento se ubica dentro de una linea de texto; y no crea un salto de linea como lo hace normalmente un bloque (entiendase bloque como cualquier elemento definido como display: block.
The inside of an inline-block is formatted as a block box
Hablando (lamentablemente) vagamente, se podría decir que el elemento inline-block funciona como un tipo block para los elementos hijos. Sé que por el momento no tiene mucho sentido, pero les aseguro qe se le puede sacar ventaja a esta cualidad.
The element itself is formatted as an inline replaced element
Mientras que para sus descendientes es tipo block, para sus ascendentes es de tipo inline. Además, que funcione como un elemento inline implica que su ancho (por defecto) esté determinado por su contenido; dicho de otra manera, será tan angosto como las lineas de contenido se lo permitan. Por otro lado, cuando habla de replaced element, el mejor ejemplo son las imagenes (IMG). El elemento IMG es reemplazado por una imagen, que es tipo inline y cuyo tamaño (ancho y alto del elemento) está determinado por las dimensiones de la imagen en sí.

Ejemplos un tanto forzados

Un par de cajas con la propiedad width definida y que se ubican dentro de un linea. 

span {display:inline-block;
 width:45px;
 background:#ccc;
 }

<span>inline-block 1</span> Lorem Ipsum dolor <span>inline-block 2</span><br>

<span>inline-block 3</span> Lorem Ipsum dolor <span>inline-block 4</span>

Ejemplo 1: Dos inline-block en la misma linea. Vale mencionar que estos elementos, al funcionar igual que las imagenes, respetan la linea de renglón. Más información en Espacio bajo las imagenes.

Otro caso sería tener un elemento tipo block que queremos que se adecue a su contenido y que además esté centrado. 

body {text-align:center}

div {display:inline-block;
 background:#ccc;
 }

<div>Lorem ipsum<br>
dolor sit amet<br>
consectetuer adipiscing elit.<br>
Aenean sed neque…</div>

Ejemplo 2: Elemento tipo block adecuado a su contenido y centrado. Normalmente DIV un ocupa todo el ancho disponible, pero al estar funcionando como inline, el ancho depende del contenido. Otro detalle importante que ya no puede centrarse usando margin:auto sino que, como todo texto, se centra usando text-align:center.

There is a bug on the floor

  • Fuera de los errores que tengan los navegadores con respecto a la implementación de inline-block, hay que tener en cuenta que este valor recién fue introducido en la versión 2.1 de CSS. Esta revisión en particular se mantiene todavia como una Candidate Recommendation por lo que no es totalmente oficial y usar las novedades no es válido. Dicho de otra manera, usar inline-block implica que el archivo CSS deje de validar. No es que sea cuestión de vida o muerte, pero bien vale la advertencia para prevenir sustos o quejas.
  • El caso de IE6 está más alla del bug o de la implementación. IE sólo soporta este valor para aquellos elementos que, por defecto, son de tipo inline.
  • Otro leve error de IE es cómo trata a los elementos inline-block. Estos elementos, al funcionar como texto, deben respetar el renglón. Pero al aplicar un color de fondo al elemento, queda claro que IE lo extiende por debajo del renglón invadiendo el espacio de los descendentes de las letras.

  • Opera tiene un bug: Si existen dos elementos inline-block juntos (en la misma linea) y uno de ellos tiene definida un valor diferente a auto para height, el texto dentro elemento con height:auto escapa de su contenedor y se alinea con el texto del otro elemento. El siguiente código daría problemas en Opera. 
    span {display:inline-block;}

<span style="height:90px">lorem</span> <span>ipsum</span>

  • Firefox, por razones que me son desconocidas, eligió jugar de vueltero y no soportar inline-block hasta la versión 1.0.4 está dando soporte experimental para esta propiedad. En su lugar, prefiere la extensión propietaria -moz-inline-block -moz-inline-box.

Powered by Blogger