Elementu paplašināšana CSS priekš JavaScript

CSS īpašību width un height iestatīšana negarantē, ka elements iegūs noteiktu izmēru. Apskatīsim to ar piemēriem.

Piemērs

Šobrīd elementa izmēri sakrīt ar norādītajiem:

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

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

Piemērs

Tagad piešķirsim elementam īpašību padding. Rezultātā faktiskais elementa platums kļūs lielāks un paplašināsies par norādīto vērtību iekšējās atstarpes:

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

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

Piemērs

Arī apmales esamība paplašina elementu:

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

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

Piemērs

Īpašība box-sizing ļauj mainīt iepriekš aprakstīto uzvedību. Var izdarīt tā, ka ne iekšējā atstarpe, ne apmale nepaplašinās elementu. Lai to izdarītu, šai īpašībai ir jāpiešķir vērtība 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;
}

Aprakstītā nozīmīgums

No JavaScript perspektīvas aprakstītā situācija nav īsti ērta. Galu galā izrādās, ka nolasot īpašības width vērtību, mēs nemaz nevaram būt pārliecināti, ka elements būs tieši šāda platuma.