¿Se pueden esconder elementos html con css? Sí, se puede y en este artículo vas a ver 3 formas distintas de hacerlo, con sus pros y contras. Simplemente con un código css vas a poder mostrar u ocultar elementos html.
1.- Display
Si utilizas este código eliminarás el elemento por completo y no estará ocupando espacio.
2.- Visibility
Aplicando visibility escondes el elemento pero se sigue manteniendo el espacio.
3.- Opacity
Con este código estarás modificando la opacidad del elemento y por tanto, seguirá ocupando espacio.
Tabla comparativa de estas propiedades:
Siempre es interesante conocer, cuando se aplica una propiedad, cual ocupa más o consume más espacio.
| Espacio ocupado | Consume espacio | |
| Opacity: 0 | V | V |
| visibility: hidden | V | X |
| display: none | X | X |
Por lo tanto, si quieres ocupar el mínimo espacio y que consuma menos tu opción es display: none;
¿Y si quieres que esos elementos se vuelvan a mostrar?
En ese caso tendrías que modificar las propiedades.
1.- Display
Utilizarías display: block, display: inline o cualquier otra etiqueta de display que muestre el elemento.
2.- Visibility
En este caso utilizarías visibility: visible;
Aunque es importante que sepas que por defecto, el elemento ya es visible, sólo se aplicaría si está oculto y quieres que aparezca por ejemplo con hover.
3.- Opacity
Cuando utilizas opacity: 0; estás indicando que quieres que el elemento no esté visible, si quieres que esté visible solo tienes que insertar opacity: 1;
La opacidad en cualquier elemento es 1, es decir 100% opaco.
Lo interesante de la opacidad es que puedes poner elementos intermedios y que esté algo visible pero no al 100%. En este caso, por ejemplo una opacidad del 70% sobre el elemento la pondrías como opacity: 0.7; En este caso no lo verías totalmente opaco y bastante visible pero no al 100%.
Y esto es todo sobre como eliminar elementos html con css. ¿A qué es simple?
