| Definición | Establece el tipo de caja generada por un elemento |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores:
|
| Valor inicial | iinline |
| Se aplica a | Todos los elementos |
| Válida en | all |
| Se hereda | no |
| Definición en el estándar | w3.org/TR/CSS21/visuren.html#propdef-display |
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:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum Donec mollis nunc in leo Vivamus fermentum
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:
[display: inline] Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum Donec mollis nunc in leo Vivamus fermentum
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:
[display: block] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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.
[display: inline] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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.
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:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
[display: block] Lorem ipsum[display: block] Donec mollis nunc in leo[display: block] Vivamus fermentum
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:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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. [display: inline-block, width: 25%] Quisque semper, magna sed pharetra tincidunt, quam urna dapibus dolor, a dignissim sem neque id purus. Etiam luctus viverra nisi. Integer lobortis accumsan felis. Cras venenatis. Morbi cursus, tellus vitae iaculis pulvinar, turpis nibh posuere nisl, sed vehicula massa orci at dui. Morbi pede ipsum, porta quis, venenatis et, ullamcorper in, metus. Nulla facilisi. Quisque laoreet molestie mi. Ut mollis elit eget urna.
Si tu navegador soporta el valor
inline-block, el ejemplo anterior se debe visualizar de forma similar a la siguiente imagen:
Figura 4.1 Ejemplo del valor inline-block de la propiedad display
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>:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Sed non sem quis tellus vulputate lobortis.
Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit pede.
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.
Otro de los valores 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-incontiene una caja de bloque, la cajarun-inse convierte en una caja de bloque. - Si después de la caja
run-inse encuentra una caja de bloque (que no esté posicionada de forma absoluta y tampoco esté posicionada de forma flotante), la cajarun-inse convierte en una caja en línea en el interior de la caja de bloque. - En cualquier otro caso, la caja
run-inse 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:
[display: run-in] Lorem ipsum
[display: block] dolor sit amet, consectetuer adipiscing elit.
[display: run-in] Lorem ipsum
[display: inline] dolor sit amet, consectetuer adipiscing elit.
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:
Figura 4.2 Ejemplo del valor run-in de la propiedad display
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:
[display: table-cell] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas non tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed fermentum lorem a velit.
[display: table-cell] In molestie suscipit libero. Cras sem. Nunc non tellus et urna mattis tempor. Nulla nec tellus a quam hendrerit venenatis. Suspendisse pellentesque odio et est. Morbi sed nisl sed dui consequat sodales.
[display: table-cell] Morbi sed nisl sed dui consequat sodales. Vivamus ornare felis nec est. Phasellus massa justo, ornare sed, malesuada a, dignissim a, nibh. Vestibulum vitae nunc at lectus euismod feugiat. Nullam eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ut ipsum.
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:
Figura 4.3 Ejemplo del valor table-cell de la propiedad display
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:
Curabitur rutrum eros a risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In molestie suscipit libero. Cras sem. Nunc non tellus et urna mattis tempor. Nulla nec tellus a quam hendrerit venenatis. Suspendisse pellentesque odio et est.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas non tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed fermentum lorem a velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sodales, enim in volutpat vehicula, leo turpis vehicula magna, ut rutrum arcu lorem ac pede. Curabitur rutrum eros a risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In molestie suscipit libero. Cras sem. Nunc non tellus et urna mattis tempor. Nulla nec tellus a quam hendrerit venenatis. Suspendisse pellentesque odio et est. Morbi sed nisl sed dui consequat sodales. Donec porta porta ligula. Nam erat massa, blandit in, dapibus sit amet, vestibulum et, augue. Suspendisse ac risus. Duis semper fringilla sem. Praesent augue arcu, scelerisque nec, ornare malesuada, posuere a, neque. Nullam nulla nisi, ultrices quis, adipiscing non, varius ut, dui. Nulla viverra pellentesque sem.
Nam erat massa, blandit in, dapibus sit amet, vestibulum et, augue. Suspendisse ac risus.
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:
Figura 4.4 Ejemplo de los valores table, table-row y table-cell de la propiedad display
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.