Display o Visibility
Los estilos CSS permiten decirle al navegador como ha de colocar los elementos del dom: como bloques tipo párraf, o en linea como los span, pero también pueden inidcar si qeuremos ver u ocultar un elemento.
Mostrar o tapar elementos
En HTML un elemento tipo bloque es el que tiene un espacio porencima y por debajo y acaba con un salto de linea. El ejemplo más simple es el párrafo, peor también lo son los div, h1,,h6...
CSS puede cambiarlo todo. Para eso utiliza la propiedad display o sea, mostrar que dice como mostrar el elemnto. Básicamente los valores más usados son:
- block: el elemento es un bloque (como un párrafo)
- inline: es un elemento que va en linea, en el flujo natural del texto
- flex: modo fils columnas
- grid: tipo cuadrícula
- table: como una tabla
- table-cell, table-roe, teble-column: usados para los contenidos de las tablas
Es decir display define como se ve un elemento pero también puede decirle al navegador que no se muestre display: none
Este valor saca al elemento del flujo de la página, el bloque no se muestra nni ocupa espacio alguno.
Por otro lado tenemos la propiedad CSS visibility que puede mostrar o tapar un elemento
- visibillity: visible muestra el elemento de forma normal, según diga display o la etiqueta HTML
- visibillity: hidden tapa el elemento, lo tapa el elemento no se ve pero está ahí, su espacio sigue ocupado.
¿Véis la diferencia? Visibility puede esconder un elemento pero este se mantiene en el flujo del contenido de la página
Pulsa sobre los botones y verás la diferencia entre ocultar con visibility y ocultar con display
Ocultar con visibility: hidden lo que hace es tapar el elemento, por eso se mantiene el espacio
Ocultar con display:none significa sacar el elmento del DOM, no ponerlo en la página
display: none no muestra el elemento del dom
visibillity: hidden tapa el elemento, pero sigue ocupando su espacio.