Расшириши унсурҳо дар CSS барои JavaScript

Таъин кардани хусусиятҳои CSS width ва height кафолат намедиҳад, ки унсур ба андозаи таъиншуда мерасад. Биёед ба мисолҳо нигарем.

Мисол

Ҳоло андозаҳои унсур бо андозаҳои таъиншуда мувофиқанд:

<div id="elem">
	матн
</div>

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

Мисол

Ва акнун биёед ба унсур хусусияти padding таъин кунем. Дар натиҷаи он вақъан паҳноии унсур хоҳад шуд калонтар ва ба андозаи қимати фосилаи дарунӣ васеъ мешавад:

<div id="elem">
	матн
</div>

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

Мисол

Вучуди сарҳад низ унсурро васеъ мекунад:

<div id="elem">
	матн
</div>

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

Мисол

Хусусияти box-sizing имкон медиҳад, ки рафтори дар боло тавсифшуда тағйир дода шавад. Мумкин аст, ки чунин кард, ки на фосилаи дарунӣ, на сарҳад унсурро васеъ накунанд. Барои ин ба ин хусусият лозим аст, ки қимати border-box таъин карда шавад:

<div id="elem">
	матн
</div>

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

Аҳамияти тавсифшуда

Аз дидгоҳи JavaScript ҳолати тавсифшуда хеле мувофиқ нест. Зеро маълум мешавад, ки қимати хусусияти width-ро хонда мо аслан наметавонем дар он боварӣ дошта бошем, ки унсур ҳамин паҳноӣ хоҳад дошт.