Zgjerimi i Elementeve në CSS për JavaScript

Caktimi i vetive CSS width dhe height nuk garanton që elementi do të marrë madhësinë e caktuar. Le të shohim në shembuj.

Shembull

Tani madhësitë e elementit përputhen me ato të caktuara:

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

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

Результат:

Shembull

Tani le t'i caktojmë elementit vetinë padding. Si rezultat, gjerësia reale e elementit do të bëhet më e madhe dhe do të zgjerohet me vlerën e caktuar të hapësirës së brendshme:

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

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

Результат:

Shembull

Prania e kufirit gjithashtu e zgjeron elementin:

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

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

Результат:

Shembull

Vetia box-sizing lejon ndryshimin e sjelljes së përshkruar më sipër. Mund të bëhet që as hapësira e brendshme, as kufiri të mos zgjerojë elementin. Për këtë, kësaj vetie duhet t'i caktohet vlera 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;
}

Результат:

Rëndësia e asaj që u përshkrua

Nga këndvështrimi i JavaScript, situata e përshkruar nuk është shumë e përshtatshme. Në fund del që, duke lexuar vlerën e vetisë width ne nuk mundemi të jemi të sigurt se elementi do të ketë pikërisht atë gjerësi.