Cuando trabajamos con paginas Web en algunas ocasiones es necesario que ocultemos elementos que el usuario no debe ver. Para esto tenemos dos propiedades en CSS que podemos utilizar, las dos esconden el elemento pero dan resultados diferentes.
display: Cada elemento es como si estuviera contenido en una caja (box), el comportamiento de esta caja se controla con la propiedad display la cual le dice al navegador como va representarla.
visibility: Controla la visibilidad del elemento , pero no afecta a como el navegador representa la box. Por ello esta propiedad esconde el elemento pero el espacio que ocuparía sigue representadose.
La diferencia esta en como cada uno responde al flujo normal del documento. ¿A que nos referimos? En el caso de la propiedad display:none no reserva el espacio del elemento, lo contrario sucede con la propiedad visibility:hidden, la cual si reserva el espacio que ocuparía el elemento.
A consecuencia de esta diferencia cuando utilizamos
display:none el resto de los elementos se pueden mover para ocupar el espacio que esta dejando lo que se oculto.
¿Cuando uso cada uno
Para tomar esta decisión va a depender de cada caso y de las necesidades que tengamos en nuestra pagina web.
Cuando desees que el elemento mantenga su espacio incluso si no se ve lo mas conveniente es la propiedad visibility, si por el contrario quieres que devuelva su espacio para permitir que los otros elementos colapsen a su alrededor entonces utiliza display.
Es una buena idea considerar que se ocupara o no, el espacio por los otros elementos para desarrollar un diseño en consecuencia. Por lo cual depende de cada proyecto la propiedad que determines utilizar.
Cesar Flores