Propiedad display

Ejemplos de uso

La propiedad display es una de las propiedades CSS más infrautilizadas. Aunque todos los diseñadores conocen esta propiedad y utilizan sus valores inline, block y none, las posibilidades de display son mucho más avanzadas.

De hecho, la propiedad display es una de las más complejas de CSS 2.1, ya que establece el tipo de la caja que genera cada elemento. La propiedad display es tan compleja que casi ningún navegador es capaz de mostrar correctamente todos sus valores.

El valor más sencillo de display es none que hace que el elemento no genere ninguna caja. El resultado es que el elemento desaparece por completo de la página y no ocupa sitio, por lo que los elementos adyacentes ocupan su lugar. Si se utiliza la propiedad display: none sobre un elemento, todos sus descendientes también desaparecen por completo de la página.

Si se quiere hacer un elemento invisible, es decir, que no se vea pero que siga ocupando el mismo sitio, se debe utilizar la propiedad visibility. La propiedad display: none se utiliza habitualmente en aplicaciones web dinámicas creadas con JavaScript y que muestran/ocultan contenidos cuando el usuario realiza alguna acción como pulsar un botón o un enlace.

Los otros dos valores más utilizados son block e inline que hacen que la caja de un elemento sea de bloque o en línea respectivamente. El siguiente ejemplo muestra un párrafo y varios enlaces a los que se les ha añadido un borde para mostrar el espacio ocupado por cada caja:

Como el párrafo es por defecto un elemento de bloque "block element"), ocupa todo el espacio disponible hasta el final de su línea, aunque sus contenidos no ocupen todo el sitio. Por su parte, los enlaces por defecto son elementos en línea "inline element"), por lo que su caja sólo ocupa el espacio necesario para mostrar sus contenidos.

Si se aplica la propiedad display: inline al párrafo del ejemplo anterior, su caja se convierte en un elemento en línea y por tanto sólo ocupa el espacio necesario para mostrar sus contenidos:

Para visualizar más claramente el cambio en el tipo de caja, el siguiente ejemplo muestra un mismo párrafo largo con display: block y display: inline:

De la misma forma, si en los enlaces del ejemplo anterior se emplea la propiedad display: block se transforman en elementos de bloque, por lo que siempre empiezan en una nueva línea y siempre ocupan todo el espacio disponible en la línea, aunque sus contenidos no ocupen todo el sitio:

Uno de los valores más curiosos de display es inline-block, que crea cajas que son de bloque y en línea de forma simultánea. Una caja de tipo inline-block se comporta como si fuera de bloque, pero respecto a los elementos que la rodean es una caja en línea.

El enlace del siguiente ejemplo es de tipo inline-block, lo que permite por ejemplo establecerle un tamaño mediante la propiedad width:

Si tu navegador soporta el valor inline-block, el ejemplo anterior se debe visualizar tal y como muestra la siguiente imagen:

Otro de los valores definidos por la propiedad display es list-item, que hace que cualquier elemento de cualquier tipo se muestre como si fuera un elemento de una lista (elemento <li>). El siguiente ejemplo muestra tres párrafos que utilizan la propiedad display: list-item para simular que son una lista de elementos de tipo <ul>:

A continuación se muestra el código HTML del ejemplo anterior:

<p style="display: list-item; margin-left: 2em">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p style="display: list-item; margin-left: 2em">Sed non sem quis tellus vulputate lobortis.</p>
<p style="display: list-item; margin-left: 2em">Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit pede.</p>

Los elementos con la propiedad display: list-item son exactamente iguales que los elementos <li> a efectos de su visualización, por lo que se pueden utilizar las propiedades de listas como list-style-type, list-style-image, list-style-position y list-style.

Uno de los valores más curiosos de la propiedad display es run-in, que genera una caja de bloque o una caja en línea dependiendo del contexto, es decir, dependiendo de sus elementos adyacentes. El comportamiento de las cajas de tipo run-in se rige por las siguientes reglas: * Si la caja run-in contiene una caja de bloque, la caja run-in se convierte en una caja de bloque. * Si después de la caja run-in se encuentra una caja de bloque (que no esté posicionada de forma absoluta y tampoco esté posicionada de forma flotante), la caja run-in se convierte en una caja en línea en el interior de la caja de bloque. * En cualquier otro caso, la caja run-in se convierte en una caja de bloque.

El siguiente ejemplo muestra una misma caja de tipo run-in que se visualiza de forma muy diferente en función del tipo de caja que existe a continuación:

El código HTML y CSS del ejemplo anterior se muestra a continuación:

<p style="display: run-in; border: 2px dashed #C00;"><strong>[display: run-in]</strong> Lorem ipsum</p>
<p style="display: block; border: 2px solid #000;"><strong>[display: block]</strong> dolor sit amet, consectetuer adipiscing elit.</p>

<p style="display: run-in; border: 2px dashed #C00;"><strong>[display: run-in]</strong> Lorem ipsum</p>
<p style="display: inline; border: 2px solid #000;"><strong>[display: inline]</strong> dolor sit amet, consectetuer adipiscing elit.</p>

En la actualidad sólo la última versión del navegador Opera es capaz de mostrar correctamente el ejemplo anterior, tal y como muestra la siguiente imagen:

El estándar CSS 2.1 incluye un ejemplo del posible uso del valor run-in. En este ejemplo, un título de sección <h3> crea una caja run-in, de forma que cuando va seguido de un párrafo, el titular se mete dentro del párrafo:

<h3 style="display: run-in">Lorem ipsum dolor sit amet</h3>
<p>Sed non sem quis tellus vulputate lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo. Integer lobortis accumsan felis.</p>

El resto de valores de la propiedad display están relacionados con las tablas y hacen que un elemento se muestre como si fuera una parte de una tabla: fila, columna, celda o grupos de filas/columnas. Los valores definidos por la propiedad display son inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption.

Aunque los valores relacionados con las tablas son los más avanzados, también son los que peor soportan los navegadores. A continuación se muestra un ejemplo con tres párrafos de texto que establecen la propiedad display: table-cell:

La propiedad display: table-cell hace que cualquier elemento se muestre como si fuera una celda de una tabla. Como en el ejemplo anterior los tres elementos <p> utilizan la propiedad display: table-cell, el resultado es visualmente idéntico a utilizar una tabla y tres elementos <td>.

Si utilizas un navegador con soporte completo de CSS 2.1, el ejemplo anterior se visualiza tal y como muestra la siguiente imagen:

Como los valores relacionados con las tablas hacen que cualquier elemento que no sea una tabla se muestre y comporte como si lo fuera, se pueden utilizar para crear los layouts de las páginas. Hace años, la estructura de las páginas se definía mediante tablas, filas y columnas. Esta solución tiene innumerables desventajas y por eso todos los diseñadores web profesionales crean la estructura de sus páginas mediante CSS y elementos <div>.

No obstante, las tablas tienen algunas ventajas en su comportamiento respecto a los elementos <div> posicionados de forma absoluta o flotante. La principal ventaja es que todas las celdas de una fila siempre tienen la misma altura, por lo que si se utilizan tablas no se sufre el problema de las columnas de página con diferente altura.

Además, la estructura creada con una tabla nunca se rompe, ya que las celdas de datos nunca se visualizan una debajo de otra cuando la ventana del navegador se hace muy pequeña. Sin embargo, cuando se define la estructura mediante elementos <div> posicionados es posible que la página se rompa y alguna columna se muestre debajo de otros contenidos.

Utilizando la propiedad display de forma avanzada es posible crear una estructura de página que sea semánticamente correcta, esté diseñada exclusivamente con CSS y que se comporte exactamente igual que como lo hacen las tablas.

El siguiente código HTML corresponde a la estructura de una página con tres columnas:

...
<div id="contenedor">
  <div id="contenidos">
    <div id="secundario">
      Curabitur rutrum...
    </div>
    <div id="principal">
      Lorem ipsum dolor sit amet...
    </div>
    <div id="lateral">
      Nam erat massa...
    </div>
  </div>
</div>
...

Utilizando las siguientes reglas CSS y la propiedad display es posible hacer que los elementos <div> anteriores se comporten como si fueran elementos <tr> y <td>:

#contenedor {
  display: table;
  border-spacing: 5px;
}
#contenidos {
  display: table-row;
}
#principal, #secundario, #lateral {
  display: table-cell;
}
#principal {
  width: 60%;
}
#secundario, #lateral {
  width: 20%;
}

El elemento #contenedor se visualiza como una tabla porque se le aplica la propiedad display: table. De esta forma, se pueden aplicar al elemento #contenedor propiedades exclusivas de las tablas como border-spacing. El elemento #contenidos se visualiza como si fuese una fila de tabla (etiqueta <tr>). En su interior se encuentran las tres columnas de la página que se visualizan como si fueran tres elementos <td> gracias a la propiedad display: table-cell.

A continuación se muestra el resultado obtenido al aplicar estas reglas CSS al código HTML anterior:

La estructura de la página del ejemplo anterior está diseñada exclusivamente con CSS pero se comporta como si fuera una tabla. Todas las columnas de la página tienen la misma altura sin necesidad de recurrir a ningún truco y la página nunca se rompe por muy pequeña que se haga la ventana del navegador.

Si visualizas esta página con un navegador que soporte correctamente la propiedad display de CSS 2.1, el ejemplo anterior se ve tal y como muestra la siguiente imagen:

Por último, aunque el estándar CSS 2.1 establece que el valor por defecto de la propiedad display es inline, todos los navegadores obvian esta recomendación y asignan por defecto el valor block a los elementos de bloque y el valor inline a los elementos en línea.