CSS elementlarni JavaScript uchun kengaytirish

CSS xususiyatlarini width va height belgilash elementning berilgan o'lchamga ega bo'lishini kafolatlamaydi. Keling, misollar orqali ko'rib chiqaylik.

Misol

Hozirda element o'lchamlari belgilanganlarga mos keladi:

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

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

Misol

Endi esa elementga padding xususiyatini belgilaymiz. Natijada elementning haqiqiy kengayi kattalashadi va ichki chetlashtirishning berilgan qiymatiga qarab kengayadi:

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

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

Misol

Chegara mavjudligi ham elementni kengaytiradi:

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

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

Misol

box-sizing xususiyati yuqorida tavsiflangan xatti-harakarni o'zgartirishga imkon beradi. Ichki chetlashtirish ham, chegara ham elementni kengaytirmasligi mumkin. Buning uchun bu xususiyatga border-box qiymatini belgilash kerak:

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

Tavsiflangan narsaning ahamiyati

JavaScript nuqtai nazaridan tavsiflangan holat juda qulay emas. Axir, ma'lum bo'ladiki, width xususiyatining qiymatini o'qib, biz elementning aynan shu kengaylikka ega bo'lishiga ishonch hosil qila olmaymiz.