2. La propiedad display.
Como hemos comentado, la propiedad display permite cambiar el tipo en que son mostrados los elementos. Su sintaxis es la siguiente:
display
Sintaxis: |
display: <valor>
|
Valores posibles: |
inline | block | list-item | run-in | compact | marker | 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
|
Valor inicial: |
El que tenga por defecto cada elemento.
|
Se aplica a: |
Todos los elementos
|
Heredado: |
No
|
Vemos el significado de alguno de estos valores:
- block
- Este valor provoca que un elemento genere una caja de bloque principal
- inline
- Este valor provoca que un elemento genere una o más cajas de línea
- list-item
- Este valor provoca que un elemento genere una caja de bloque principal y
una caja de línea list-item (por detalles ver la sección sobre
listas)
- marker
- Este valor declara que el contenido generado antes o después de una
caja será un marcador (por detalles ver la sección sobre marcadores)
- none
- Este valor provoca que un elemento no genere ninguna caja (es decir, el
elemento no tiene ningún efecto sobre la composición) y los
elementos descendientes tampoco generan cajas. Hay que destacar que este valor
no crea una caja invisible sino que hace que el elemento desaparezca por completo.
Esa es la diferencia con las propiedades sobre visibilidad que provocan que
un elemento pueda ser invisible pero siga ocupando un espacio en la página
- run-in y compact
- Estos valores crean cajas de bloque o de línea según el contexto
y tienen un comportamiento como el que conocemos para las listas de definiciones
- table, inline-table, table-row-group, table-column, table-column-group,
table-header-group, table-footer-group, table-row, table-cell y table-caption
- Estos valores provocan que un elemento se comporte como un elemento de una tabla.
Usándolos podemos conseguir que cualquier elemento se comporte como una tabla o como parte de una tabla. Con HTML no tiene mucho sentido ya que existen elementos como las tablas, columnas y celdas, pero otros lenguajes (XML, por ejemplo) no tienen dichos elementos.
Aunque CSS permita cambiar el tipo de un elemento, los tipos por defecto (bien tipo línea, bien tipo bloque o elemento de lista) suelen ser bastante apropiados. Los cambios de esta propiedad pueden tener efectos indeseados, por lo que debe usarse con precaución.