Box model și display
Content, padding, border, margin, box-sizing și tipurile de display.
Actualizat
Ce este box model
Pentru CSS, fiecare element e o cutie. Cutia are 4 straturi, din interior spre exterior:
margin — spațiu în afara cutiei, transparent
border — chenarul
padding — spațiu între chenar și conținut, are fundalul cutiei
content — textul, imaginea
box-sizing — cea mai importantă linie de CSS
Implicit (content-box), width se aplică doar conținutului. Padding-ul și border-ul se adaugă peste:
.box { width: 200px; padding: 20px; border: 1px solid; }
/* content-box: lățimea reală = 200 + 20*2 + 1*2 = 242px 😬 */
/* border-box: lățimea reală = 200px, conținutul se micșorează la 158px ✓ */De aceea orice proiect modern începe cu:
*, *::before, *::after { box-sizing: border-box; }Tailwind îl include automat (în preflight).
Tipuri de display
Proprietatea display decide cum se comportă cutia:
| Valoare | Comportament | Când |
|---|---|---|
block |
rând nou, toată lățimea, acceptă width/height |
secțiuni, paragrafe |
inline |
în text, ignoră width, height și margin vertical |
link, strong |
inline-block |
în text, dar acceptă dimensiuni | badge-uri, butoane vechi |
flex |
copiii pe o axă | rânduri / coloane — Flexbox |
grid |
copiii pe rânduri și coloane | layout 2D — Grid |
none |
elementul dispare complet (nici spațiu nu ocupă) | ascundere |
display: none vs visibility: hidden vs opacity: 0: primul scoate elementul din layout; al doilea îl ascunde dar păstrează spațiul; al treilea îl face transparent, dar rămâne clickabil.
Margin collapse
Margin-urile verticale a două blocuri vecine nu se adună — se ia cea mai mare:
h2 { margin-bottom: 24px; }
p { margin-top: 16px; }
/* spațiul dintre ele = 24px, nu 40px */Nu se întâmplă în flex/grid. Soluția modernă: nu pune margin pe copii, pune gap pe părinte.
Dimensiuni
| Proprietate | Rol |
|---|---|
width / height |
dimensiune fixă |
min-width / max-width |
limite — max-width: 65ch pentru text lizibil |
aspect-ratio: 16 / 9 |
proporție, fără hack-uri cu padding |
overflow: hidden / auto |
ce faci cu conținutul care nu încape |
Regula: evită height fix pe containere cu text — conținutul diferă, iar textul va ieși din cutie.
Pe scurt
- Cutia = content + padding + border + margin.
box-sizing: border-boxpeste tot.displaydecide comportamentul; flex și grid pentru layout.- Spațiere între elemente →
gappe părinte.