CSS elementlerini JavaScript üçin giňeltmek

CSS aýratynlyklaryny width we height bellemek elementiň görkezilen ölçegde boljakdygyna kepilnama berenok. Geliň mysallar bilen göreliň.

Mysal

Häzir elementiň ölçegleri görkezilenleri bilen gabat gelýär:

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

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

Результат:

Mysal

Indi bolsa elemente padding aýratynlygyny bereliň. Netijede elementiň hakyky ini görkezilen içerki araçäk bahasyna köpelip giňener:

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

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

Результат:

Mysal

Çäginiň bolmagy hem elementi giňeldýär:

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

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

Результат:

Mysal

box-sizing aýratynlygy ýokarda beýan edilen hereketi üýtgetmäge mümkinçilik berýär. Içerki araçäk we çäg hem elementi giňeltmezlik etmek bolýar. Bunun üçin bu aýratynlyga border-box bahasyny bermek gerek:

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;
}

Результат:

Beýan edilenleriň möhümdigi

JavaScript göz bilen beýan edilen ýagdaý örän amatly däl. Sebäbi width aýratynlygynyň bahasyny okap, elementiň edil şol ini boljakdygy barada ynamly bolup bilmeýäris.