visibility
Indica si un elemento debe estar oculto (invisible) o permanecer visible.
- visible: Valor por defecto. El elemento se mostrará.
- hidden: El elemento se ocultará (útil si queremos hacer un mapa oculto de la web para que los buscadores puedan navegar mejor por nuestra página y que los usuarios no lo vean.
¿Qué diferencias hay entonces entre display: none y visibility: hidden?
* {
padding-top: 10px;
}
article:first-child{
background-color: red;
/* display: none; */ /* Desaparece la visualización de un elemento */
visibility: hidden;
}
article span {
background-color: black;
color: white;
margin: 1px;
}
article,
span {
padding: 10px;
border-radius: 7px;
}
article,
div {
margin: 20px;
}