.card { box-sizing: border-box; width: 100%; padding: 24px; border: 2px solid #334155; }Cardul rămâne în lățimea containerului chiar dacă are padding și bordură.
LECȚIA 44 DIN 100
Păstrează lățimea cu border-box
Include paddingul și bordura în lățimea declarată a cardului.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
Cu box-sizing: border-box, width descrie marginea exterioară a bordurii. Paddingul și bordura sunt scăzute din spațiul conținutului în loc să mărească lățimea totală.
.card { box-sizing: content-box; width: 100%; padding: 24px; border: 2px solid #334155; }Cu content-box, paddingul și bordura se adaugă peste width: 100% și pot produce overflow.
PASUL 2 · APLICĂ
Exercițiul tău
Completează box-sizing cu border-box și păstrează width: 100%.
index.htmlCSS
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ
Ce trebuie să treacă
0%neverificat
- ○Cardul folosește border-box.
- ○Lățimea fluidă rămâne 100%.
- ○Cardul țintă este prezent.
Explică-mi logica rezolvării
border-box face ca width să includă zona de conținut, paddingul și bordura, astfel încât cardul să rămână în container.