Ne putem gandi la majoritatea elementelor din HTML ca facand parte dintr-una din cele 2 categorii: block sau inline.
Aceste doua valori reprezinta de fapt o parte din valorile pe care le poate lua proprietatea display. Ea precizeaza modul in care un element interactioneaza cu elementele din jurul lui.
Un element care are display: block; se va intinde pe toate lungimea parintelui si va forta elementele de inainte si dupa el sa treaca pe un rand nou. Aceste elemente sunt de obicei folosite pentru delimita sectiuni dintr-o pagina sau pentru a forta o bucata de text sa fie pe propriul rand, precum tag-ul <p>.
Un element ce are display: inline; apare in interiorul textului, precum in mijlocul unei propozitii si nu va forta cuvintele de dupa el sa treaca pe o linie noua, de exemplu tag-ul <strong>
Partea buna este ca prin CSS putem forta un element sa treaca din starea block in inline, si invers.
Ce valori poate lua
Cele mai intalnite valori pentru display sunt:
-
block - un element ocupa toate lungimea parintelui si forteaza alte elemente sa treaca pe un rand nou. elemente care sunt in mod normal block:
<p>,<div> -
inline - se foloseste in interiorul textului si nu intrerupe cursivitatea textului. exemplu de elemente:
<span>,<strong> - none - folosit pentru a ascunde in totalitate un element din pagina
- flex - folosit pentru a creea o structura a paginii, de exemplu un meniu lateral.