Care este diferența dintre elementele bloc și inline?

Question

Accepted Answer

Fiecare element are un comportament **display** implicit care controlează cum se comportă în layout. - Elementele **Bloc** încep pe o **linie nouă** și ocupă **toată lățimea disponibilă**. Ele acceptă width/height și toate marginile/paddingurile. Exemple: `

`, `

`, `
`, `
`. - Elementele Inline curg în cadrul unei linii, doar cât lată este conținutul lor, și ignoră width/height și marginile de sus/jos. Exemple: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## O capcană practică ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Setarea `width`/`height` pe un element inline nu face nimic. Soluția este să schimbi display-ul: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — cel mai bun din ambele lumi `inline-block` se află în fluxul de text (lângă lângă) și* respectă width/height/marginile — perfect pentru elemente de navigație, insigne sau butoane dispuse pe o linie. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## De ce este important Înțelegerea display-ului implicit explică de ce `` tău nu ia o înălțime, de ce `
`urile se stivuiesc și când să treci la `inline-block`, `flex` sau `grid`. Este baza pentru modul în care elementele se aranjează înainte de a aplica orice sistem de layout.