MyCodeSchool
Modelul Box în CSS
mycodeschool.ro

🎨 CSS Box Model - Tutorial Complet

Box Model este unul dintre conceptele fundamentale în CSS. Fiecare element HTML este reprezentat ca o cutie dreptunghiulară cu mai multe straturi.

Înțelegerea Box Model este esențială pentru a crea layout-uri precise și pentru a controla spațierea elementelor.

📦 Ce este Box Model?

Box Model în CSS descrie cum sunt calculate dimensiunile și spațierea fiecărui element HTML. Fiecare element este compus din 4 părți:

CONTENT
Conținutul propriu-zis

De la interior spre exterior:

🎯 Componentele Box Model

1. Content (Conținut)

Zona centrală unde se afișează conținutul efectiv - text, imagini, etc.

/* Controlează dimensiunea conținutului */
width: 300px;
height: 200px;
Acesta este conținutul. Width: 200px

2. Padding (Umplutură)

Spațiu transparent între conținut și bordură. Preia culoarea de fundal a elementului.

/* Padding uniform */
padding: 20px;

/* Padding pe fiecare latură */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;

/* Sintaxă scurtă: sus dreapta jos stânga */
padding: 10px 20px 15px 25px;
Acest element are padding: 15px 30px

3. Border (Bordură)

Chenarul vizibil al elementului. Poate avea diferite stiluri, grosimi și culori.

/* Border complet */
border: 5px solid #3498db;

/* Proprietăți individuale */
border-width: 3px;
border-style: dashed;
border-color: #e74c3c;

/* Border pe o singură latură */
border-left: 4px solid #2ecc71;
Border: 10px solid #2ecc71 cu border-radius: 15px

4. Margin (Margine)

Spațiu transparent în afara bordurii. Creează distanță între elemente.

/* Margin uniform */
margin: 20px;

/* Margin auto pentru centrare orizontală */
margin: 0 auto;

/* Valori negative sunt permise */
margin-top: -10px;
Centrat cu margin: 0 auto

📏 Box-Sizing Property

Proprietatea box-sizing determină cum se calculează dimensiunea totală a unui element.

content-box (implicit)

Width = 200px + padding + border
Total = 250px
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px solid;

border-box (recomandat)

Width = 200px (include tot)
Total = 200px
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;

💡 Sfat Pro:

Folosește această regulă la începutul CSS-ului pentru un comportament mai predictibil:

* {
  box-sizing: border-box;
}

🔄 Margin Collapse

Marginile verticale ale elementelor adiacente se combină (collapse) în cea mai mare valoare.

Margin-bottom: 30px
Margin-top: 30px

Rezultat: Spațiul dintre elemente este 30px, nu 60px!

🎮 Demo Interactiv

Modifică valorile și vezi efectul în timp real:

20px
5px
20px
Box Model Demo

📊 Tabel Recapitulativ

Proprietate Descriere Valori Exemple
width/height Dimensiunea conținutului 300px, 50%, auto, 100vw
padding Spațiu interior 20px, 1em, 10px 20px
border Chenar vizibil 1px solid black, 5px dashed red
margin Spațiu exterior 20px, auto, -10px, 10px 20px 30px 40px
box-sizing Modul de calcul content-box, border-box

🚀 Exemple Practice

Card Responsive

.card {
  width: 100%;
  max-width: 500px;
  margin: 20px auto;
  padding: 2em;
  border-radius: 15px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
Card Responsive cu Box Model

🎯 Trucuri Utile: