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:

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

#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:

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

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

Shembull

Prania e kufirit gjithashtu e zgjeron elementin:

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

#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:

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

#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.