Uitbreiding van elemente in CSS vir JavaScript

Die instelling van CSS eienskappe width en height waarborg nie dat die element die gespesifiseerde grootte sal hê nie. Kom ons kyk na voorbeelde.

Voorbeeld

Tans stem die element se afmetings ooreen met die gespesifiseerde:

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

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

Результат:

Voorbeeld

En laat ons nou die element die eienskap padding toewys. As gevolg hiervan sal die werklike breedte van die element vermeerder en uitbrei met die gespesifiseerde waarde van die binnekant:

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

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

Результат:

Voorbeeld

Die teenwoordigheid van 'n rand brei die element ook uit:

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

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

Результат:

Voorbeeld

Die eienskap box-sizing laat die bogenoemde gedrag toe om verander te word. Dit kan gedoen word sodat nóg die binnekant nóg die rand die element uitbrei. Om dit te doen, moet hierdie eienskap die waarde border-box toegewys word:

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

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

Результат:

Belangrikheid van bogenoemde

Vanuit 'n JavaScript-oogpunt is die beskryfde situasie nie baie gerieflik nie. Dit blyk immers dat deur die waarde van die eienskap width te lees, ons glad nie seker kan wees dat die element presies daardie breedte sal hê nie.