Proširenje elemenata u CSS-u za JavaScript

Postavljanje CSS svojstava width i height ne garantuje da će element postati zadate veličine. Pogledajmo na primerima.

Primer

Sada se veličine elementa poklapaju sa zadatim:

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

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

Результат:

Primer

A sada hajde da postavimo elementu svojstvo padding. Kao rezultat, stvarna širina elementa će postati veća i proširiće se za zadatu vrednost unutrašnjeg odstupa:

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

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

Результат:

Primer

Prisustvo granice takođe proširuje element:

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

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

Результат:

Primer

Svojstvo box-sizing omogućava promenu gore opisanog ponašanja. Može se postići da ni unutrašnji odstup, ni granica ne proširuju element. Za to ovom svojstvu treba postaviti vrednost 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;
}

Результат:

Značaj opisanog

Sa stanovišta JavaScript-a, opisana situacija nije baš zgodna. Uostalom, ispada da pročitavši vrednost svojstva width uopšte ne možemo biti sigurni da će element biti baš te širine.