HTML.it - Guida CSS di base - La proprietà visibility

visibility: visible

Per questo box abbiamo impostato visibility sul valore visible. La cosa è per certi versi ridondante, perché un elemento è di default visibile.

Questa dichiarazione ha senso quando si voglia rendere visibile un elemento inizialmente nascosto.

.box-1 {
 width: 400px;
 height: 300px;
 padding: 10px;
 border: 1px solid #002c53;
 background: #568ec0;
 visibility: visible;
}

visibility: hidden

Sotto questo box (.box-2) si trova un box invisibile (.box-3). Si noti come lo spazio definito dalle dimensioni del box sia comunque 'occupato'.

Box invisibile
<div class="box-2">
<p>Sotto questo box [...].</p>  
</div>
<div class="box-3">Box invisibile</div>

.box-2 {
 width: 400px;
 height: 300px;
 padding: 10px;
 border: 1px solid #002c53;
 background: #568ec0;
}
.box-3 {
 width: 400px;
 height: 300px;
 padding: 10px;
 border: 1px solid #002c53;
 background: #568ec0;
 visibility: hidden;
}