Algunas variantes de la propiedad display

Las etiquetas son rectángulos, algunos, independientes otros no; por eso se habla de elementos de tipo bloque (block) o elementos inline; ambos son rectángulos, como todo lo demás pero los primeros siempre se ubicarán por defecto uno debajo del otro (DIV P LI) y los otros, se ubicarán uno al lado del otro (SPAN IMG A).

Por lo general, utilizamos la propiedad display con dos valores: block o inline.

Lo hacemos para invertir esa propiedad por defecto es decir, hacer que un elemento inline sea un bloque o que un elemento de bloque sea inline. El primer caso es el típico de las imagenes centradas donde establecemos que la etiqueta IMG sea de tipo block. El segundo, lo usamos muchas veces para los menús agregando el valor inline a la etiqueta LI para que se vean una al lado de la otra.

Pero, esos no son los únicos valores que acepta la propiedad display y en particular, hay algunos relativamente nuevos que son muy interesantes y que vale al pena tener en cuenta ya que son aceptados por todos los navegadores incluyendo IE8.

Supongamos que tenemos dos DIVs a los que dimensionamos y le ponemos algún tipo de contenido:

<style>
div.ejemplo {
  height: 100px;
  margin: 5px;
  padding: 0 10px;
  text-align: center;
  vertical-align: middle;
  width: 250px;
}
</style>

<div class="ejemplo"> ....... </div>
<div class="ejemplo"> ....... </div>

BLOCK 1
Integer convallis erat mattis arcu vehicula et fermentum mi cursus.

BLOCK 2
Integer convallis erat mattis arcu vehicula et fermentum mi cursus.

Lo que veremos es un rectángulo debajo del otro y alineados a la izquierda. Aunque no hemos definido nada, la propiedad display tiene el valor de block ya que es la propiedad por defecto de una etiqueta DIV. Si quisiéramos centrarlos, cambiaríamos margin:5px; por margin:5px auto;

Si estableciéramos la propiedad display con el valor inline, lo que veríamos sería algo bastante confuso:

INLINE 1
Integer convallis erat mattis arcu vehicula et fermentum mi cursus.

INLINE 2
Integer convallis erat mattis arcu vehicula et fermentum mi cursus.

Pero, en lugar de eso, vamos a utilizar uno de esos valores poco frecuentes llamado inline-block:

<div class="ejemplo" style="display:inline-block;"> ....... </div>
<div class="ejemplo" style="display:inline-block;"> ....... </div>

INLINE-BLOCK 1
Integer convallis erat mattis arcu vehicula et fermentum mi cursus.

INLINE-BLOCK 2
Integer convallis erat mattis arcu vehicula et fermentum mi cursus.

Lo que estamos viendo son dos rectángulos, uno al lado del otro; si quisieramos centrarlos, ya no nos sirve el método anterior sino que deberíamos colocarlos dentro de otro DIV dimensionado al que sí centramos con margin. De alguna manera, es algo muy similar a cuando se utiliza float:left aunque tiene la ventaja de no afectar en nada al resto de la página tal como ocurre con float.

Hasta acá, en todos los casos, el contenido permanecía alineado verticalmente arriba, la propiedad vertical-align que se utilza para centrar verticalmente no tiene afecto pero, hay un par de valores más que podemos usar para resolver el famoso tema de alinear cosas. Se trata de los valores table y table-cell que lo que hacen es ... algo parecido a una tabla.

<div class="ejemplo" style="display:table-cell;"> ....... </div>
<div class="ejemplo" style="display:table-cell;"> ....... </div>

TABLE-CELL 1
Integer convallis erat mattis arcu vehicula et fermentum mi cursus.

TABLE-CELL 2
Integer convallis erat mattis arcu vehicula et fermentum mi cursus.

Es similar a inline-block; aparecen uno al lado del otro, con el contenido centrado verticalmente pero, esta vez, la que no tiene ningún efecto es la propiedad margin.

Para centrar esto y separar los DIVs, debemos usar un contenedor:

<style>
div.contenedortablecell {
  border-spacing: 5px 0;
  display: table;
  height: 200px;
  margin: 0 auto;
  width: 400px;
}
div.tablecell {
  display: table-cell;
  padding: 0 10px;
  text-align: center;
  vertical-align: middle;
}
</style>

<div class="contenedortablecell">
<div class="tablecell"> ....... </div>
<div class="tablecell"> ....... </div>
<div class="tablecell"> ....... </div>
<div class="tablecell"> ....... </div>
</div>

1
Integer convallis erat mattis arcu vehicula et fermentum mi cursus.

2
Integer convallis erat mattis.

3
Integer convallis.

4
Integer convallis erat mattis arcu vehicula et fermentum mi cursus.

100px | 400px | 500px | 600px

Allí, dimensionamos el contenedor con height y width; las "celdas" se adaptarán a su contenido de manera automática, distribuyéndose en ese ancho definido; eso puede probarse haciendo click sobre los enlaces superiores aunque claro, si pretendemos que el contenedor sea mas angosto que el contenido (100) el valor será ignorado y el ancho será el mínimo posible que en este caso son 369 pixeles.

En el estilo, la separación se define con al propiedad border-spacing que es al que establece el espacio entre celdas donde el primer valor indica el espacio horizontal y el segundo el vertical. Sobre esto hay que tener en cuenta que en muchas páginas se dice que además debe agregarse otra: border-collapse: collapse; pero es errçoneo, en realidad, debe hacerse lo contrario que es poner border-collapse: separate; o nada ya que esa es la propiedad por defecto.