CSS-ի տարրերի ընդլայնում JavaScript-ի համար

CSS հատկությունների՝ width և height նշանակումը երաշխավորում չէ, որ տարրը կստանա նշված չափսը: Եկեք նայենք օրինակներով:

Օրինակ

Այժմ տարրի չափսերը համընկնում են նշվածների հետ:

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

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

Օրինակ

Այժմ եկեք տարրին նշանակենք padding հատկությունը: Արդյունքում տարրի իրական լայնությունը կդառնա ավելի մեծ և կընդլայնվի ներքին բացի նշված արժեքով:

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

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

Օրինակ

Սահմանի առկայությունը նույնպես ընդլայնում է տարրը.

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

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

Օրինակ

box-sizing հատկությունը թույլ է տալիս փոխել վերը նկարագրված վարքագիծը: Կարելի է անել այնպես, որ ոչ ներքին բացը, ոչ էլ սահմանը ընդլայնեն տարրը: Դրա համար այս հատկությանը պետք է նշանակել 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;
}

Նկարագրվածի կարևորությունը

JavaScript-ի տեսանկյունից նկարագրված իրավիճակը շատ հարմար չէ: Չէ՞ որ ստացվում է, որ կարդալով width հատկության արժեքը՝ մենք բոլորովին չենք կարող վստահ լինել, որ տարրը կունենա հենց այդ լայնությունը: