Razširitev elementov v CSS za JavaScript

Nastavitev CSS lastnosti width in height ne zagotavlja, da bo element dobilo določeno velikost. Poglejmo si na primerih.

Primer

Trenutno se velikosti elementa ujemajo z določenimi:

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

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

Результат:

Primer

In sedaj nastavimo elementu lastnost padding. Kot rezultat bo dejanska širina elementa postala večja in se bo razširila za določeno vrednost notranjega odmika:

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

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

Результат:

Primer

Prisotnost obrobe pravijo razširi element:

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

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

Результат:

Primer

Lastnost box-sizing omogoča spreminjanje zgoraj opisanega vedenja. Lahko naredimo tako, da niti notranji odmik, niti obroba ne razširita elementa. Za to je treba tej lastnosti določiti 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;
}

Результат:

Pomembnost opisanega

Z vidika JavaScript je opisana situacija ne zelo priročna. Kajti izkaže se, da z branjem vrednosti lastnosti width sploh ne moremo biti prepričani, da bo element ravno te širine.