Display si Visibility

CSS | Stefanescu Mihai | 2020-10-11

In acest tutorial am sa va invat cum sa ascundeti un element fie folosind display: none fie visibility:hidden si diferenta dintre ele.

visibility:hidden va ascunde un elemente, dar spatiul ocupat de acesta va ramane gol ca si cand el inca ar mai fii acolo, iar display: none va ascunde elementul si va elibera spatiul ocupat de acesta, iar pagina va fi afisata ca si cand acel element nu ar fi existat.

Exemplu visibility:

h1.hidden {
    visibility: hidden;
}

Exemplu display:

h1.hidden {
    display: none;
}

Display – Elementele inline si block

Un element de tip block este un element ce ocupa toata latimea disponibila si insereaza un line break inainte si dupa el.

Elemente de tip block:

  • <h1>
  • <p>
  • <li>
  • <div>

Un element inline ocupa decat latimea necesara lui si nu introduce nici-un line break.

Elemente de tip inline:

  • <span>
  • <a>

Schimba tipul unui element

Cand faceti un design HTML/CSS va trebuii  sa schimbati tipul unui element block in inline sau invers pentru a face o pagina sa arate intr-un anumit fel.Cum schimbam un element <li> din block in inline:

li{
display: inline;
}

Cum schimbam un element <span> din inline in block:

span{
display: block;
}

 



Imi place ce faci aici
Daca iti place ce fac aici imi poti cumpara o cafea Buy Me a Coffee at ko-fi.com

Stefanescu Mihai
Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.
       

Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum.

Posteaza un comentariu

Comentarii

Inca nu au fost postate comentarii, fii primul care posteaza un comentariu!

Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.

🗝ïļ Login 🌟 Register

🔖 Bookmarks ⊞
âœĻ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌊ïļ Discord ⊞

Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.

⮆ïļ