Proprietatea box-sizing

Proprietatea box-sizing permite modificarea modului de calcul al dimensiunilor unui element.

În mod implicit, adăugarea padding extinde elementul: dacă am setat lățimea width la 100px și padding-left de 20px, atunci lățimea reală a elementului va fi 120px.

Iar dacă setăm și border-left de 10px, atunci lățimea reală a elementului va deveni 130px. Adică padding și border extind blocul (atât în lățime, cât și în înălțime). Acest comportament poate fi schimbat cu box-sizing.

Sintaxă

cssselector {
  box-sizing: content-box | border-box;
}

Valori

Valoare implicită: content-box.

Exemplu . Comportamentul standard

Acum ambele blocuri au aceeași înălțime și lățime, însă celui de-al doilea bloc îi este setat padding, iar primului - nu. Uitați-vă cum diferă dimensiunile lor:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  margin-bottom: 10px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Exemplu . Comportamentul standard

Acum ambele blocuri au aceeași înălțime și lățime, însă celui de-al doilea bloc îi este setată o bordură de 10px, iar primului - nu. Uitați-vă, cum diferă dimensiunile lor:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Exemplu . Comportamentul standard

Acum al doilea bloc are atât padding, cât și bordură de 10px:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  border: 20px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Exemplu . Valoarea border-box

Adăugăm celui de-al doilea element valoarea border-box pentru proprietatea box-sizing. Acum dimensiunile atât ale primului cât și ale celui de-al doilea element vor deveni identice:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  box-sizing: border-box;
  padding: 50px;
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Vedeți și