CSS avanzado: todo sobre la propiedad display

Podría decirse que esta propiedad define el tipo de caja que genera un elemento. Todos los elementos generados en el HTML ocupan un espacio (aunque mediante el uso de la propiedad “float” puede hacerse que los elementos dejen de ocupar este espacio aunque permanezcan visibles) y pueden comportarse de muchas formas.

Esta propiedad solo admite el uso de uno de los valores posibles. Los más importantes son:  inline, block, inline-block, table, inline-table, table-row, table-column, table-cell, none e inherit, siendo su valor inicial “inline” y es aplicable a todos los elementos, sin que estos hereden la propiedad.

Display: none

Es la forma más simple que presenta esta propiedad, en la que se indica al elemento que no genere ninguna caja, con lo que el elemento simplemente desaparece.

Como consecuencia de ello, el elemento deja de ocupar un espacio en la presentación del documento, por lo que los elementos adyacentes simplemente ignoran su presencia y ocupan su espacio.

Este valor se utiliza generalmente en el desarrollo de elementos dinámicos con javascript, además de poder utilizarse junto a pseudo-clases en el desarrollo de algunos efectos visuales que simulan efectos dinámicos exclusivamente desarrollados con HTML y CSS, como en el  siguiente ejemplo: Menú desplegable con HTML y CSS.

Display: block

<p class="bloque">Elemento con comportamiento en bloque</p>
<p class="bloque">Otro elemento que se comporta como bloque</p>

.bloque {
  padding: 10px;
  background: #ccc;
  display: block;
  }

Cuando un elemento es marcado con este valor de la propiedad “display”, el mismo se comporta como bloque. Este comportamiento como bloque quiere decir que:

• El elemento no permitirá la ubicación de elementos adyacentes.
• En caso de que sus dimensiones no sean determinadas, ocupará todo el ancho disponible dentro del elemento contenedor, y tendrá una altura que será determinada por el contenido.
• Cuando se determina el ancho, el elemento ocupará solo la extensión determinada, pero sin permitir la ubicación de elementos adyacentes, aún cuando haya espacio suficiente para que se ubique en él otro elemento.

Display: inline

<p class="linea">Elemento con comportamiento en línea</p>
<p class="linea">Otro elemento que se comporta en línea</p>

.linea  {
  padding: 10px;
  background: #ddd;
  display: inline;
  }

Los elementos cuya propiedad “display” tienen el valor “inline” se comportan como elementos en línea, lo que quiere decir que:

• Estos elementos permiten la ubicación de elementos adyacentes.
• No puede determinarse el ancho ni la altura de estos elementos, ya que como elementos en línea, las dimensiones de los mismos son determinadas por el contenido.

Display: inline-block

<p class="linblock">Elemento con comportamiento en línea y en bloque</p>
<p class="linblock">Otro elemento que se comporta en línea y en bloque</p>

.linblock {
  padding: 10px;
  background: #f60;
  display: inline-block;
  width: 150px;
  }

Los elementos que tienen en su propiedad “display” este valor, tienen parte del comportamiento de los valores “inline” y “block”.

Se comportan como si se tratara de elementos de bloque, pero que permiten la presencia de elementos adyacentes, lo que es propio de los elementos en línea. Las características de estos elementos son:

• Permiten elementos adyacentes, como si se tratara de elementos en línea.
• Pueden determinarse sus dimensiones, como los elementos de bloque.
• Cuando no se determina su extensión, ocupan todo el espacio disponible, como sucede con los elementos de bloque.
• La posición que ocupan estos elementos, es similar a los elementos en línea, lo que quiere decir que la parte inferior del elemento se apoyará en la base de la línea.

Display: flex

Es uno de los valores más modernos de esta propiedad y también más potentes. Puede que al principio cueste un poco entenderlo, pero una vez lo hagas no dejarás de usarlo.

Para usar Flexbox, tienes que definir un contenedor padre con la propiedad display: flex. Y a partir de ahí, los contenedores hijos podrán usar propiedades de flexbox para adaptarse a lo que necesites.

Si sabes un poco de ingles, te recomiendo la guía de Flexbox de CSS-tricks. Y como la mejor forma de aprender es practicar, intenta hacer estos ejercicios de display flex.

Una cosa importante sobre flex. Hay dos especificaciones distintas que son soportadas cada una por diferentes navegadores, lo que significa que pude complicarse un poco usar Flexbox y que funcione bien en la mayoría de navegadores posibles. Mi recomendación es que uses un generador de código en este caso, como Flexy Boxes.

Display: list-item

<p class="lista">Elemento con comportamiento ítem de lista</p>
<p class="lista">Otro elemento que se comporta como ítem de lista</p>

.lista  {
  display: list-item;
  list-style-type: square;
  }

Este valor hace que el elemento se comporte como si se tratara de un ítem de lista, es decir, como si se tratara de un elemento <li>. Su comportamiento es exactamente igual que si se tratara de un ítem de lista, por lo que soporta las propiedades de este tipo de elementos, como “list-style”.

Al igual que los ítems de lista, su comportamiento respecto de los demás elementos es similar a los elementos de bloque, por lo que no permite la presencia de elementos adyacentes y pueden determinarse todas sus dimensiones.

Display: table y similares

Otros valores de esta propiedad son aquellos que hacen que los elementos se comporten como si se tratara de tablas o como partes de ellas: como tablas, filas, columnas y celdas, o como grupos de ellas.

Dentro de los valores que tiene la propiedad display, los que están relacionados con las tablas son aquellos en los que mayores diferencias hay entre los navegadores, y en muchos casos ni siquiera están soportados.

Si bien es cierto que la maquetación con tablas es incorrecta, tanto desde el punto de vista semántico como desde el punto de vista práctico, hay que reconocer que las tablas presentan algunas ventajas en lo que refiere a la sencillez con que se pueden posicionar los elementos en algunos casos.

Para aquellos casos en los que el uso de las tablas puede resultar una ventaja, CSS presenta estos valores de la propiedad “display”, que hace que los elementos se comporten como tablas o partes de tablas.

Nota importante: Mozilla Firefox comenzó a soportarlo con la aparición de la versión 3, mientras que en Internet Explorer no se había implementado hasta la aparición de Internet Explorer 8.

¿Usar tablas o los valores de tablas de “display”?

Los valores de tablas de la propiedad “display” son útiles para que los elementos se comporten como si se tratara de tablas. Sin embargo, en caso de tener que ingresar datos tabulados, lo correcto es utilizar tablas ya que HTML dispone de las mismas para ello.

Table, table-row y table-cell

En la imagen anterior, vemos la utilización de tres de los valores de la propiedad, “table”, “table-row” y “table-cell”. En este caso se encuentran aplicados a capas (div), que cumplen con los mismos propósitos que los elementos correspondientes de las tablas (tabla, fila y celda respectivamente).

Es posible (salvo para Google Chrome) utilizar solo la propiedad “table-cell” cuando disponemos de los elementos en una sola fila. Para el caso de Google Chrome, es necesario que los elementos se encuentren dentro de una capa que tenga la propiedad “display” con el valor “table-row”, ya que de otra forma, los elementos se comportarán como si la propiedad no estuviera determinada.

Inline-table

Se trata de un valor bastante peculiar, ya que produce que el elemento se comporte como tabla, pero a diferencia de éstas, se mantiene en línea, es decir, sin salto de línea anterior ni posterior.

Es importante marcar que, mientras en casi todos los navegadores el elemento marcado con “inline-table” se desarrolla desde la línea hacia abajo, en Google Chrome los elementos se desarrollan hacia arriba de la línea. Ejemplo:

Table-column

Los elementos contenidos dentro de éste elemento, se comportan como si se tratara de una columna, lo que en el correspondiente HTML sería <column>.

Otros valores

Dentro de la propiedad, hay valores que hacen que los elementos se comporten como si se trataran de grupos de partes de tablas, como grupos de filas y grupos de columnas. En cada uno de los casos, pueden ser grupos de una o más filas o columnas respectivamente.

De similares características son los elementos “table-header-group” (thead en HTML) y “table-footer-group” (tfoot en HTML), que determinan al grupo de filas del encabezado y pie de los elementos dispuestos en forma de tabla. Otro caso especial es el de “table-caption”, que hace que el elemento se comporte como si se tratara de títulos de la tabla.

Código utilizado para display: table

Para que puedas llevar adelante las prácticas con los valores de la propiedad “display”, te dejamos el código que hemos empleado que aparecen en las imágenes, de forma que puedas hacer todas las modificaciones que consideres necesarias para comprender el funcionamiento de los elementos que utilizan estos valores.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

#contenedor {
  width: 700px;
  margin: auto;
  }
  
td, table  {
  border: solid 1px #000;
  }
  
table {
  text-align: center;
  margin-bottom: 20px;
  }

.celda  {
  border: solid 1px #000;
  display: table-cell;
  }
  
.fila {
  display: table-row;
  }
  
.tabla  {
  display: table;
  border-spacing: 2px;
  text-align: center;
  border: solid 1px #000;
  }
  
.tabla-linea  {
  display: inline-table;
  border-spacing: 2px;
  text-align: center;
  border: solid 1px #000;
  }