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. 

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 oculatr con visibility y ocultar con display