Cauta rapid aici ↑

Proprietatea box-sizing

Aceasta proprietate este foarte utila in momentul in care ne dorim ca un element ce contine margine interioara (padding) si linie (border) sa nu depaseasca un anumit numar de pixeli pe latime sau inaltime, valori declarate cu proprietatile width si height.

Dupa cum stim de la standardul BOX MODEL (sau bloc de informatii cum imi place sa ii spun), proprietatile padding, border si margin maresc dimensiunea elementului respectiv pe latime si/sau inaltime (in momentul cand sunt folosite) cu valorile pe care le au.

Pentru a forta elementul sa isi pastreze dimensiunea pe care o are pe latime si inaltime fara un pixel in plus sau in minus chiar daca vom folosi proprietatile padding si/sau border vom avea nevoie de proprietatea box-sizing.

Rolul acestei proprietati, asa cum ii spune si numele, este de a ne indeplini noua dorinta ca un element sa aibe inclus marginea interioara (padding) si linia (border) in aceeasi dimensiune pe care i-am declarat-o elementului cu proprietatile width si height.... cu mica diferenta ca nu se aplica pentru proprietatea margin.

Valorile pentru proprietatea box-sizing sunt border-box, content-box, initial si inherit. Primele doua sunt cele mai importante.

  • content-box → Default. Proprietatile width, min-width, max-width si height, min-height max-height fac referire doar la continut iar padding, border si margin nu sunt incluse.
  • border-box → Proprietatile width, min-width, max-width si height, min-height max-height fac referire doar la continut plus padding si border iar proprietatea margin nu este inclusa.
  • initial → Seteaza valoarea initiala, de baza.
  • inherit → Seteaza valoarea mostenita din elementul parinte.

Mai jos va arat un exemplu in care un div contine proprietatea box-sizing cu valoarea border-box, aceasta fiind cea mai importanta si un alt div care nu are aceasta proprietate.