Hay varias formas de ocultar un elemento con CSS, y no son intercambiables: cada una se comporta distinto con el espacio, los clics y el lector de pantalla. Te dejo las 5 con su código y, lo más importante, cuándo usar cada una para no meter la pata en accesibilidad.
1. display: none (oculta y quita el hueco)
La más común. El elemento desaparece por completo: no se ve y no ocupa espacio. Ojo: también deja de existir para el lector de pantalla.
.oculto {
display: none;
}Úsalo cuando: quieres que el elemento no exista para nadie, por ejemplo en menús desplegables o pestañas inactivas.
2. visibility: hidden (oculta pero deja el hueco)
El elemento se vuelve invisible pero sigue ocupando su espacio. La maquetación no se mueve.
.invisible {
visibility: hidden;
}Úsalo cuando: quieres esconder algo sin que el resto del diseño dé un salto.
3. opacity: 0 (transparente, pero ahí sigue)
Lo hace transparente. Sigue ocupando espacio y sigue siendo clicable. Su ventaja es que se puede animar con una transición.
.desvanecer {
opacity: 0;
transition: opacity .3s ease;
}Úsalo cuando: quieres una aparición o desaparición suave (fade in / fade out).
4. El atributo hidden (HTML)
No es CSS puro, pero es lo más legible: añades hidden al elemento y equivale a display:none.
<div hidden>No se ve</div>
/* Y desde CSS puedes forzar su comportamiento */
[hidden] { display: none; }Úsalo cuando: controlas la visibilidad desde el HTML o con JavaScript de forma sencilla.
5. Ocultar solo visualmente (accesible)
A veces quieres esconder algo a la vista pero que el lector de pantalla siga leyéndolo (por ejemplo, una etiqueta para accesibilidad). Para eso está la clase «visually-hidden»:
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}Úsalo cuando: das contexto a la tecnología de apoyo sin mostrarlo en pantalla. Nunca uses display:none para esto.
Cuál elegir, de un vistazo
| Método | ¿Ocupa espacio? | ¿Accesible? |
|---|---|---|
| display: none | No | No |
| visibility: hidden | Sí | No |
| opacity: 0 | Sí (y clicable) | Sí |
| atributo hidden | No | No |
| .visually-hidden | No | Sí |
Más CSS en el blog
Preguntas frecuentes
¿Diferencia entre display:none y visibility:hidden?
display:none quita el elemento del flujo (no ocupa espacio); visibility:hidden lo oculta pero deja su hueco.
¿Cómo lo oculto sin que desaparezca para el lector de pantalla?
Con la clase «visually-hidden»: lo saca de la vista pero lo mantiene accesible. No uses display:none para eso.
¿opacity:0 oculta de verdad?
Visualmente sí, pero sigue ocupando espacio y sigue siendo clicable. Es ideal para transiciones, no para ocultar del todo.
Regla rápida: si no debe existir para nadie, display:none; si es por accesibilidad, visually-hidden. Copia el código y pruébalo.
