Elementide laiendamine CSS-is JavaScripti jaoks

CSS-i omaduste width ja height määramine ei garanteeri, et element saab määratud suuruse. Vaatame seda näidete varal.

Näide

Praegu on elemendi mõõtmed samad määratutega:

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

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

Результат:

Näide

Ja nüüd määrame elemendile omaduse padding. Selle tulemusena muutub elemendi tegelik laius suuremaks ja laieneb määratud väärtuse sisemise tagasitõrje võrra:

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

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

Результат:

Näide

Piiri olemasolu laiendab elementi samuti:

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

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

Результат:

Näide

Omadus box-sizing võimaldab muuta ülalkirjeldatud käitumist. Saab teha nii, et ei sisemine tagasitõrje ega piir ei laiendaks elementi. Selleks tuleb sellele omadusele määrata väärtus 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;
}

Результат:

Kirjeldatu tähtsus

JavaScripti vaatenurgast on kirjeldatud olukord mitte väga mugav. Sest selgub, et lugedes omaduse width väärtust, ei saa me olla üldse kindlad, et element on just selle laiusega.