Diferențele dintre elementele de nivel bloc și elementele în linie

HTML este alcătuit din diverse elemente care acționează ca elemente de bază ale paginilor web. Fiecare dintre aceste elemente se încadrează în una din cele două categorii: elemente la nivel de bloc sau un element în linie. Înțelegerea diferenței dintre aceste două tipuri de elemente este un pas important în construirea paginilor web.

Elemente de nivel bloc

Deci, ce este un element la nivel de bloc? Un element la nivel de bloc este un element HTML care începe o nouă linie pe o pagină web și extinde lățimea completă a spațiului orizontal disponibil al elementului său părinte. Creează blocuri mari de conținut, cum ar fi paragrafe sau diviziuni de pagini. De fapt, majoritatea elementelor HTML sunt elemente la nivel de bloc.

Elementele la nivel de bloc sunt utilizate în corpul documentului HTML. Ele pot conține elemente în linie, precum și alte elemente la nivel de bloc.

Elemente inline

Spre deosebire de un element la nivel de bloc, un element în linie:

• Poate începe într-o linie.
• Nu pornește o nouă linie.
• Lățimea sa se extinde numai în măsura în care este definită de etichetele sale.

Un exemplu de element în linie este , care face ca fontul conținutului text să fie cuprins în boldface. Un element inline conține în general numai alte elemente inline sau nu poate conține nimic, cum ar fi
tag de pauză.

Există, de asemenea, un al treilea tip de element în HTML: cele care nu sunt deloc afișate. Aceste elemente oferă informații despre pagină, dar nu sunt afișate când sunt redate într-un browser Web.

De exemplu:

•  definește meta date.
•  este elementul document HTML care deține aceste elemente.

Comutarea tipurilor de elemente în linie și bloc

Puteți schimba tipul unui element de la linie la bloc, sau invers, folosind una dintre aceste proprietăți CSS:

• display: bloc; 

• display: inline; 

• display: none;

CSS afișarea proprietății vă permite să modificați o proprietate în linie pentru a o bloca, sau un bloc în linie sau să nu se afișeze deloc.

Când să modificați proprietatea de afișare

În general, lăsați proprietatea de afișare în pace, dar există unele cazuri în care schimbarea proprietăților de afișare în linie și blocare poate fi utilă.

• Meniuri listă orizontală: Listele sunt elemente la nivel de bloc, dar dacă doriți ca meniul dvs. să se afișeze orizontal, trebuie să convertiți lista într-un element în linie, astfel încât fiecare element de meniu să nu înceapă pe o nouă linie.
• Anteturile din text: Uneori s-ar putea să doriți ca un antet să rămână în text, dar să păstrați valorile antetului HTML. Schimbarea valorilor h1 prin h6 în linie va permite ca textul care vine după eticheta de închidere să continue să curgă lângă el pe aceeași linie, în loc să înceapă pe o nouă linie.
• Eliminarea elementului: Dacă doriți să eliminați complet un element din document debit normal, puteți seta afișajul la

  nici unul

  O notă, aveți grijă când utilizați afișajul: niciuna. În timp ce stilul respectiv va face, într-adevăr, un element invizibil, nu doriți niciodată să îl utilizați pentru a ascunde textul pe care l-ați adăugat din motive de SEO, dar nu doriți să îl afișați pentru vizitatori. Acesta este un mod sigur de a vă penaliza site-ul pentru o abordare SEO pălărie neagră.

Greșeli comune de formatare a elementelor în linie

Una dintre cele mai frecvente greșeli pe care un nou venit la designul web o face este încercarea de a seta lățimea unui element în linie. Acest lucru nu funcționează deoarece lățimile elementelor în linie nu sunt definite de cutia containerului.

Elementele în linie ignoră mai multe proprietăți:

• lăţime

  și

  înălţime

• lățimea maximă

  și

  înălțimea maximă

• lățime min

  și

  min-înălțime

Dacă trebuie să definiți lățimea sau înălțimea pe care ar trebui să o ocupe un element, veți dori să o aplicați elementului la nivel de bloc care conține textul dvs. în linie.