Lecția 4: Box Model și Dimensiuni în CSS

1. Ce este Box Model-ul?

În CSS, fiecare element HTML este considerat o „cutie” (box). Această cutie este formată din 4 componente principale:

• Content – conținutul efectiv (text, imagine etc.)
• Padding – spațiul dintre conținut și marginea interioară
• Border – conturul elementului
• Margin – spațiul exterior, față de alte elemente

2. Reprezentare vizuală a Box Model-ului

Codul CSS pentru casetă:

.caseta {
  background-color: white;
  border: 2px solid #CC0000;
  padding: 20px;
  margin: 20px;
  width: 300px;
}

3. Proprietăți legate de dimensiuni

Dimensiunile unui element se pot controla cu:

• width – lățimea
• height – înălțimea
• padding – spațiu interior
• border – contur
• margin – spațiu exterior

4. Exercițiu: O casetă cu dimensiuni definite

<style>
  .exemplu {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 3px dashed red;
    margin: 30px;
    background-color: #FFF;
  }
</style>

<div class="exemplu">
  Exemplu de box cu dimensiuni controlate.
</div>

5. Valori posibile pentru dimensiuni

Putem folosi diverse unități de măsură:

• px – pixeli (ex: width: 200px)
• % – procente față de elementul părinte
• em, rem – unități relative la font
• vh, vw – înălțimea/lățimea ferestrei

6. Proprietatea box-sizing

Aceasta definește cum sunt calculate dimensiunile totale ale elementului:

box-sizing: content-box;  /* implicit - padding și border se adaugă la width/height */
box-sizing: border-box;   /* padding și border sunt incluse în width/height */

Exemplu recomandat (pentru a evita calcule complicate):

* {
  box-sizing: border-box;
}

7. Concluzie

Box Model-ul este esențial în poziționarea și stilizarea elementelor HTML. În lecțiile următoare vom explora poziționarea, afișarea (display), alinierea și responsive design-ul.