Box model

Despre faptul ca un element in HTML arata si se comporta ca un dreptunghi (modelul box) am vorbit in al doilea capitol.

Tot atunci am precizat ca valorile pentru width si height sunt de fapt pentru continutul elementului nu pentru tot elementul. La aceasteaa se mai adauga padding si border.

Acest lucru se intampla datorita unei reguli din css denumita box-sizing:

div {
    box-sizing: content-box;
    width: 50px;
    height: 40px;
    padding: 10px;
    border: 1px solid teal;
    margin: 5px;
}

Valoarea de content-box face ca pentru orice element block, dreptunghiul elementului sa fie reprezentat doar de continutul sau. Aceasta este valoarea implicita folosita de orice browser in momentul de fata.

Aceasta inseamna ca elementul de mai sus va avea in final urmatoarele dimensiuni:

• latimea: 50px + 10px + 1px = 61px
• inaltimea: 40px + 10px + 1px = 51px

Margin nu se aduna niciodata.

border-box

O alta valoare pentru box-sizing este border-box. Aceasta va face ca box-ul sa se extinda pana la border:

div {
    box-sizing: border-box;
    width: 50px;
    height: 40px;
    padding: 10px;
    border: 1px solid teal;
    margin: 5px;
}

In acest caz valorile finale pentru latimea si inaltime sunt 50px si 40px. Exact cat setam noi in CSS. Padding-ul si border-ul se vor scadea apoi din latimea elementului si continutul va ocupa restul.

Aceasta valoare este mult mai folositoare cand folosim procente pentru width:

div {
    box-sizing: border-box;
    width: 50%;
}

Folosind border-box este mult mai intuitiv pentru ca stim exact cat va ocupa elementul si stim ca elementul nu va creste niciodata peste 50%.

In general este recomandat sa folosim border-box pe toate elementele din pagina.