Ce face visibility
Diferența dintre cele trei moduri de a ascunde un element în CSS:
1. display: none: elementul este șters complet din flux, nu ocupă spațiu, vecinii se apropie.
2. visibility: hidden: elementul este invizibil, dar păstrează exact același gol alb în pagină ca și cum ar fi acolo. Nu poate fi dat clic pe el.
3. opacity: 0: elementul este invizibil, păstrează spațiul, dar încă răspunde la clic.
Valori uzuale
| Valoare | Descriere |
|---|---|
visible |
Elementul este vizibil în mod normal. |
hidden |
Elementul devine invizibil, dar își rezervă spațiul. |
collapse |
Folosit în tabele pentru a elimina rânduri fără a recalcula lățimea coloanelor. |
Exemple
Exemplul 1: Păstrarea alinierii prin ascunderea fără eliberarea spațiului
visibility: hidden previne saltul de conținut în layout.
.mesaj-eroare {
visibility: hidden; /* rezervă spațiul de 20px dinainte */
color: #ef4444;
}
.mesaj-eroare.activ {
visibility: visible;
}Efect vizual în browser
Formularul nu sare în sus și în jos când apare sau dispare mesajul de eroare, deoarece spațiul este deja rezervat.Greșeli frecvente
- Folosirea visibility: hidden când utilizatorul dorea de fapt să elimine complet spațiul alb (în acest caz trebuie folosit display: none).
Comenzi înrudite
display (block, inline, inline-block, none): Stabilește tipul de cutie al elementului în fluxul paginii sau îl ascunde complet din document.opacity: Setează gradul de transparență al unui element întreg, inclusiv al tuturor copiilor săi.