Extinderea elementelor în CSS pentru JavaScript

Setarea proprietăților CSS width și height nu garantează faptul că elementul va avea dimensiunea stabilită. Să analizăm câteva exemple.

Exemplul

În acest moment dimensiunile elementului coincid cu cele stabilite:

html<div id="elem">
  text
</div>

css#elem {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
}

Результат:

Exemplul

Acum să setăm elementului proprietatea padding. Ca rezultat, lățimea reală a elementului va deveni mai mare și se va extinde cu valoarea stabilită a spațiului interior:

html<div id="elem">
  text
</div>

css#elem {
  padding: 25px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
}

Результат:

Exemplul

Prezența bordurii, de asemenea, extinde elementul:

html<div id="elem">
  text
</div>

css#elem {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
  border: 20px solid #F0D7A1;
}

Результат:

Exemplul

Proprietatea box-sizing permite modificarea comportamentului descris mai sus. Putem face ca nici spațiul interior, nici bordura să nu extindă elementul. Pentru aceasta, acestei proprietăți trebuie să-i stabilim valoarea border-box:

html<div id="elem">
  text
</div>

css#elem {
  box-sizing: border-box;
  padding: 20px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
  border: 20px solid #F0D7A1;
}

Результат:

Importanța celor descrise

Din perspectiva JavaScript, situația descrisă nu este foarte convenabilă. Se dovedește că, citind valoarea proprietății width, nu putem fi deloc siguri că elementul va avea exact această lățime.