| Definición | Permite hacer visibles o invisibles las cajas de los elementos |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores:
|
| Valor inicial | visible |
| Se aplica a | Todos los elementos |
| Válida en | medios visuales |
| Se hereda | si |
| Definición en el estándar | w3.org/TR/CSS21/visufx.html#propdef-visibility |
Ejemplos de uso
La propiedad visibility es similar a la propiedad display pero mucho más limitada. Mientras que display permite cambiar el tipo de caja de un elemento, la propiedad visibility sólo permite hacer visible o invisible una caja.
El valor por defecto de visibility es visible, que hace que la caja del elemento se vea de forma normal. Otro de los valores definidos por visibility es hidden, que hace que la caja del elemento sea invisible.
El efecto de hacer invisible una caja mediante visibility: hidden es muy diferente al efecto de ocultarla mediante display: none. El siguiente ejemplo muestra el resultado de hacer invisible y ocultar la caja 2:
Cuando una caja es invisible (visibility: hidden) no se muestra pero sigue ocupando sitio, por lo que los elementos adyacentes se comportan como si fuera visible. Por su parte, una caja oculta (display: none) ni se ve ni ocupa sitio, por lo que es como si no existiera en la página y los elementos adyacentes se ven afectados.
Además, cuando una caja se oculta todos sus elementos interiores se ocultan automáticamente. De la misma forma, cuando una caja se hace invisible sus elementos interiores también se hacen invisibles automáticamente. La diferencia es que los elementos interiores invisibles se pueden volver a mostrar si se utiliza la propiedad visibility: visible
Por último, la propiedad visibility define el valor collapse, que sólo se utiliza en las filas y columnas de las tablas. Si se emplea el valor collapse en cualquier elemento que no sea una fila, grupo de filas, columna o grupo de columnas, tiene el mismo efecto que el valor hidden.
La propiedad visibility es mucho más limitada que la propiedad display, pero puede resultar útil para crear efectos visuales dinámicos cuando se utiliza junto con JavaScript.