Propiedad CSS visibility
La propiedad CSS visibility define si el elemento es visible u oculto para el usuario. Encuentra ejemplos y pruébalos tú mismo.
La propiedad CSS visibility controla si un elemento se muestra u oculta sin alterar el diseño — un elemento oculto mantiene exactamente el espacio que ocuparía si fuera visible. Esta página cubre los tres valores principales (visible, hidden, collapse), cómo visibility difiere de display y opacity, las implicaciones de accesibilidad al ocultar contenido y ejemplos ejecutables para cada valor.
Qué hace visibility
El valor más utilizado es hidden. Al establecer visibility: hidden, el elemento se vuelve invisible pero sigue ocupando su espacio en el diseño — el contenido circundante no se mueve para llenar el hueco. El elemento también se elimina del orden de tabulación y no es anunciado por los lectores de pantalla, por lo que queda genuinamente oculto para las tecnologías de asistencia, no solo visualmente.
Una característica poco común: visibility se hereda, pero un hijo puede sobreescribirla. Si un padre tiene visibility: hidden, un descendiente con visibility: visible reaparecerá aunque su ancestro esté oculto.
El valor collapse tiene un tratamiento especial para elementos relacionados con tablas (<tr>, <col>, grupos de filas, grupos de columnas). En ellos, elimina la fila o columna por completo — de la misma forma que lo haría display: none — por lo que el resto de la tabla se redistribuye para cerrar el hueco, pero los anchos de columna de la tabla se calculan como si la fila todavía estuviera allí. En elementos que no son tablas, collapse simplemente se comporta como hidden.
La compatibilidad entre navegadores para collapse en elementos de tabla es inconsistente: algunos motores lo renderizan de forma idéntica a hidden (la fila mantiene su espacio visible). Si necesitas que una fila desaparezca de forma uniforme entre navegadores, usa display: none en el <tr> en su lugar.
visibility vs. display vs. opacity
Estas tres propiedades "ocultan" un elemento, pero se comportan de manera diferente — elegir la incorrecta es un error común.
| Propiedad | ¿Conserva el espacio? | ¿En el árbol de accesibilidad? | ¿Recibe eventos? |
|---|---|---|---|
visibility: hidden | Sí | No | No |
display: none | No (colapsa) | No | No |
opacity: 0 | Sí | Sí | Sí |
Usa visibility: hidden cuando quieras reservar el espacio del elemento pero ocultar su contenido (por ejemplo, alternar un marcador de posición sin que la página salte). Usa display: none cuando quieras que el elemento desaparezca y el diseño se cierre. Usa opacity: 0 solo cuando quieras un elemento que siga siendo interactivo y legible por lectores de pantalla — por ejemplo, un elemento que estás atenuando o haciendo aparecer.
Dado que visibility es animable, puedes combinarla con opacity para un efecto de desvanecimiento que termine en un elemento completamente oculto y no interactivo:
.fade {
opacity: 1;
visibility: visible;
transition: opacity 0.3s, visibility 0s linear 0.3s;
}
.fade.is-hidden {
opacity: 0;
visibility: hidden;
}| Valor inicial | visible |
|---|---|
| Se aplica a | Todos los elementos (collapse solo se aplica a elementos relacionados con tablas). |
| Heredable | Sí. |
| Animable | Sí. |
| Versión | CSS2 |
| Sintaxis DOM | Object.style.visibility = "collapse"; |
Sintaxis
Sintaxis de la propiedad CSS visibility
visibility: visible | hidden | collapse | initial | inherit | revert | revert-layer;Ejemplo de la propiedad visibility con el valor "hidden":
Ejemplo de la propiedad CSS visibility con el valor hidden
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example.</h2>
<div>Here is some text for example.</div>
<p>Text, which will not be displayed in browser.</p>
<div>
You see space above this sentence, but actually there is some text, which has visibility property with hidden value.
</div>
</body>
</html>Resultado
Ejemplo de la propiedad visibility con los valores "visible" y "hidden":
Ejemplo de la propiedad CSS visibility con los valores visible y hidden
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.test1 {
visibility: visible;
}
.test2 {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p class="test1">Lorem Ipsum is simply dummy text.</p>
<p class="test2">Lorem Ipsum is simply dummy text.</p>
<p>The space above is a hidden text.</p>
</body>
</html>Ejemplo de la propiedad visibility con el valor "collapse":
Ejemplo con la propiedad CSS visibility con el valor collapse
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.collapse {
visibility: collapse;
}
table {
border: 2px solid #666;
}
td {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p>Here the "collapse" value is applied.</p>
<table>
<tr>
<td>10</td>
<td class="collapse">100</td>
<td>1000</td>
</tr>
<tr>
<td>20</td>
<td>200</td>
<td>2000</td>
</tr>
<tr class="collapse">
<td>30</td>
<td>300</td>
<td>3000</td>
</tr>
<tr>
<td>40</td>
<td>400</td>
<td>4000</td>
</tr>
</table>
</body>
</html>Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| visible | En este caso la etiqueta es visible. Este es el valor predeterminado de esta propiedad. | Pruébalo » |
| hidden | Este valor solo oculta visualmente los elementos. | Pruébalo » |
| collapse | Se usa con elementos de tabla específicos (filas, grupos de filas, columnas, grupos de columnas) para eliminar filas o columnas completas. Este valor tiene el mismo significado que "hidden" cuando se usa con otros elementos. | Pruébalo » |
| initial | Hace que la propiedad use su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. | |
| revert | Revierte la propiedad a su valor heredado o valor inicial, según lo que corresponda. | Pruébalo » |
| revert-layer | Revierte la propiedad al valor establecido en la capa anterior de la cascada. | Pruébalo » |
Propiedades relacionadas
- CSS
display— oculta un elemento y elimina su espacio del diseño. - CSS
opacity— hace que un elemento sea transparente manteniéndolo interactivo. - CSS
overflow— controla el contenido que se desborda fuera de su caja. - CSS
position— desplaza elementos fuera del flujo normal.