Rozszerzanie elementów w CSS dla JavaScript

Ustawienie właściwości CSS width i height nie gwarantuje, że element osiągnie określony rozmiar. Spójrzmy na przykładach.

Przykład

Teraz rozmiary elementu pokrywają się z zadanymi:

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

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

Результат:

Przykład

A teraz ustawmy elementowi właściwość padding. W rezultacie rzeczywista szerokość elementu stanie się większa i rozszerzy się o podaną wartość wewnętrznego marginesu:

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

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

Результат:

Przykład

Obecność obramowania również rozszerza element:

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

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

Результат:

Przykład

Właściwość box-sizing pozwala zmieniać opisane powyżej zachowanie. Można sprawić, aby ani wewnętrzny margines, ani obramowanie nie rozszerzały elementu. Dla tej właściwości należy ustawić wartość 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;
}

Результат:

Ważność opisanej sytuacji

Z punktu widzenia JavaScript opisana sytuacja nie jest zbyt wygodna. W końcu okazuje się, że po przeczytaniu wartości właściwości width wcale nie możemy być pewni, że element będzie dokładnie tej szerokości.