Diferencia entre display none y visibility hidden


Hoy veremos la diferencia que hay entre display: none y visibility: hidden.

display: none;

Cuando utilizamos display: none el elemento se ocultará, y la página se mostrara como si el elemento no estuviera allí.

Código HTML
<html>
  <head>
    <title>display:none;</title>
    <link rel="stylesheet" href="display.css">
  </head>
  <body>
    <h1>Este es un encabezado</h1>
    <h1 class="oculto">Este es un encabezado oculto</h1>
    <p>Vida del Programador</p>
  </body>
</html>
Estilo CSS
.oculto {display: none;}
El navegador lo mustra así.

display

Si se fijan no muestra el texto “Este es un encabezado oculto” que escribimos dentro del h1 en el codigo html.

visibility: hidden;

Cuando utilizamos visibility: hidden el elemento se ocultará pero aún ocupará el mismo espacio que antes, es decir afectará la estructura del sitio.

Ejemplo:

Código HTML
<html>
  <head>
    <title>visibility: hidden;</title>
    <link rel="stylesheet" href="display.css">
  </head>
 <body>
    <h1>Este es un encabezado</h1>
    <h1 class="oculto">Este es un encabezado oculto</h1>
    <p>Vida del Programador</p>
  </body>
</html>
CSS
.oculto {visibility:hidden;}
El navegador lo mustra así.

visibility

Si se fijan no muestra el texto “Este es un encabezado oculto” que escribimos dentro del h1 en el codigo html, pero aún así afecta la estructura del sitio.