Display
Sin duda la propiedad display es una de las más complejas, completas y menos aprovechadas propiedades CSS. La propiedad display marca como será el tipo de caja que genera un elemento.

Sus valores posibles son los siguientes:

• inline
• block
• list-item
• run-in
• inline-block
• table
• inline-table
• table-row-group
• table-header-group
• table-footer-group
• table-row
• table-column-group
• table-column
• table-cell
• table-caption
• none
• inherit

Un primera consideración importante que debemos tener en cuenta es que para según que valores de display , algunos navegadores no soportan sus propiedades, con lo que convendrá hacer las pertinentes pruebas (por suerte cada vez los navegadores nuevos son más respetuosos en este sentido).

Otra consideración  importante es que pese a que en cualquier especificación estándar CSS leeremos que el valor por defecto para display es inline, la gran mayoría de navegadores le asignan el valor block a los elementos de bloque y inline sólo a los de línea.

Sabido esto… manos a la obra.

display:block;
Asigna un valor de bloque a cualquier elemento, de forma que tendrá un salto de linea antes y después del elemento. Cualquier elemento con propiedad block generará una caja que ocupará todo el ancho posible del espacio donde esté ubicado y el alto de la información que contenga, indistintamente de si su contenido ocupa o no todo el sitio.

display:inline;
Asigna un valor de línea a cualquier elemento, no tendrá salto de linea ni antes ni después. El contenido se convierte en un elemento en linea y ocupa solo el espacio necesario para mostrar sus contenidos.

display:none;
En palabras poco técnicas… hace desaparecer por completo la caja sobre la que se asigna y no ocupa ningún lugar, es decir que borra por completo cualquier rastro de una capa y no reserva el espacio que ocupa, de forma que los elementos siguientes se posicionarían sobre ese sitio (a diferencia del visibility:hidden; que solo oculta la capa pero reserva el sitio). Sobra decir que todos los elementos descendientes que estén contenidos dentro de la capa desaparecida, también desaparecen.

Como ejemplo, una utilidad para esta propiedad podría ser para ocultar elementos que se visualizan cuando apretamos en alguna zona (por Javascript o jQuery) o simplemente para ocultar zonas que no queremos que se vean, en nuestros estilos CSS para impresión, dispositivos móviles, etc.

display: inline-block;
Suele utilizarse en rarísimas ocasiones y es que sería una combinación entre los valores block e inline para una misma caja.

¿Y eso como se come?
Bueno, lo mejor será ofreceros un ejemplo gráfico pero si tengo antes que daros una explicación, sería como aplicar un elemento inline a un elemento de bloque, de forma que podemos aprovechar las propiedades independientes de cada uno para por ejemplo posicionar una caja de un tamaño determinado (width y/o height) en medio de un texto de forma que sigue perteneciendo al flujo del texto, pero esa parte concreta tiene su propia identidad.

Como ya os he dicho, el ejemplo gráfico se explicará mejor que yo.

display: list-item;
Convierte los elementos contenidos en la caja en elementos de una lista, de forma que simula los listados típicos del uso de elementos <li>. Al ser capas iguales que si fueran elementos de lista, también aceptan otros valores propios de estos como list-style-type, list-style-image, list-style-position o list-style.

display:run.in;
Otra de esas propiedades para el display muy poco conocidas y muy poco usadas por regla general. Genera cajas tipo block o tipo inline dependiendo del contenido interior de esta caja o del contenido de las cajas posteriores. Por regla general las cajas run-in son cajas de bloque salvo que después de una caja run-in venga una caja de bloque, pues la caja run-in adquiere el valor de inline quedando dentro de la caja de bloque.

Un ejemplo de uso que dan en la web de W3C es:

<div>
<h3 style=”display:run-in;”>Texto de encabezado.</h3>
<p>Al que le sigue este párrafo de texto de ejemplo.<p>
</div>

Esto generaría que en este caso el elemento <h3>quedara como principio del parrafo que está a continuación de forma que:

Texto de encabezado. Al que le sigue este párrafo de texto de ejemplo.

display: inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell o table-caption;
Todos estos valores convierten nuestras capas en elementos propios de las tablas: filas, columnas, celdas,…

• table:
  El elemento sera mostrado como una Tabla de Bloque ( como <table> ) con salto antes y después del elemento.
• inline-table:
  El Elemento sera mostrado como una Tabla de Linea ( como <table> ) sin salto antes o después del elemento.
• table-row-group:
  El elemento sera mostrado como un grupo de una o más filas (como <tbody>)
• table-header-group:
  El elemento sera mostrado como un grupo de una o más filas (como <thead>)
• table-footer-group:
  El elemento sera mostrado como un grupo de una o más filas (como <tfoot>)
• table-row:
  El elemento se mostrara como una fila de tabla (como <tr>)
• table-column-group:
  El elemento sera mostrado como un grupo de una o más columnas. (como <colgroup>)
• table-column:
  El elemento sera mostrado como una columna de celdas (como <col>)
• table-cell:
  El elemento sera mostrado como una tabla de celda(como <td> y <th>)

Algunas ventajas del uso de esta propiedad pasan por el hecho de que podemos crear capas en nuestra página web que tengan la misma propiedad que una tabla pero que no lo sean, de forma que siempre puede ser variada desde la CSS sin necesidad de modificar el código fuente original.

Si ponemos el ejemplo de un catálogo de productos que aparecen en nuestra página como si fueran tarjetas independientes, uno de los problemas que podemos tener es si posicionamos estas tarjetas flotando junto a la siguiente, pues podemos encontrarnos con tarjetas que tienen mas información y por tanto su altura varía respecto a la adyacente, generando un feo efecto visual aparte de un más que posible descuadre con las tarjetas que aparezcan debajo.

El uso de valores como table-cell generará que todas las celdas sean iguales siendo la mas alta de ellas la que marque la altura, tal como si de una tabla se tratara.

Además la estructura de una tabla nunca se rompe independientemente del tamaño de la pantalla de forma que mantiene el ancho que deseemos y evitando el molesto salto de aquellos elementos posicionados al redimensionar la ventana.

Os animo a que seáis vosotros los que experimentéis con el resto de valores para crearos vuestros elementos tipo tabla; aunque no conviene abusar de esta técnica, primero porque no todos los navegadores las interpretan igual y segundo porque no debe usarse para poner aquellos valores que realmente deban crearse con una tabla.

Una cosa es respetar los estándares y crear páginas accesibles y la otra es pasarse y convertir valores tabulados en DIV’s.