Ce face box-sizing
box-sizing este una dintre cele mai importante proprietăți CSS. În modelul vechi implicit (content-box), dacă pui width: 200px și adaugi padding: 20px, elementul ajunge să ocupe 240px lățime totală, stricând grila.
Cu box-sizing: border-box, lățimea declarată de 200px rămâne fix 200px: padding-ul și bordura sunt absorbite spre interior. Standardul universal pe orice site modern este resetarea tuturor elementelor la border-box.
Valori uzuale
| Valoare | Descriere |
|---|---|
border-box |
Recomandat: lățimea și înălțimea includ conținutul, padding-ul și border-ul. |
content-box |
Implicit: lățimea include doar conținutul; padding-ul și bordura se adaugă peste. |
Exemple
Exemplul 1: Resetul universal recomandat pentru orice proiect web
Garantează că două coloane de 50% vor încăpea perfect una lângă alta chiar dacă au padding.
*, *::before, *::after {
box-sizing: border-box;
}
.coloana {
width: 50%;
padding: 20px; /* nu va rupe rândul! */
border: 1px solid #ccc;
}Efect vizual în browser
Coloana ocupă exact 50% din lățimea ecranului, iar padding-ul de 20px rămâne în interiorul celor 50%.Greșeli frecvente
- Construirea unui site fără resetul border-box pe selectorul universal *; fără el, adăugarea oricărui padding va lărgi elementul și va cauza derulare orizontală nedorită.
Comenzi înrudite
width și height (min/max): Controlează dimensiunile orizontale și verticale ale unui element, inclusiv limitele minime și maxime permise.padding: Creează spațiu interior între conținutul elementului și bordura sa, preluând culoarea de fundal a elementului.margin: Creează spațiu gol în exteriorul bordurii unui element, distanțându-l de elementele vecine.border: Desenează o linie de contur în jurul conținutului și padding-ului unui element (grosime, stil, culoare).