বৈশিষ্ট্য box-sizing

বৈশিষ্ট্য box-sizing এলিমেন্টের আকার গণনার পদ্ধতি পরিবর্তন করতে দেয়।

ডিফল্টভাবে padding যোগ করা এলিমেন্টটিকে প্রসারিত করে: যদি আমরা প্রস্থ width 100px এবং padding-left 20px সেট করি, তাহলে এলিমেন্টের প্রকৃত প্রস্থ হবে 120px।

আর যদি আমরা border-left 10px ও সেট করি, তাহলে এলিমেন্টের প্রকৃত প্রস্থ হয়ে যাবে 130px। অর্থাৎ padding এবং border ব্লকটিকে প্রসারিত করে (প্রস্থ এবং উচ্চতা উভয় ক্ষেত্রেই)। এই আচরণ box-sizing ব্যবহার করে পরিবর্তন করা যাবে।

সিনট্যাক্স

সিলেক্টর {
	box-sizing: content-box | border-box;
}

মানসমূহ

মান	বর্ণনা
`content-box`	`padding` এবং `border` উভয়ই ব্লকটিকে প্রসারিত করে।
`border-box`	`padding` বা `border` কোনটিই ব্লকটিকে প্রসারিত করে না।

ডিফল্ট মান: content-box।

উদাহরণ . স্ট্যান্ডার্ড আচরণ

এখন উভয় ব্লকের একই উচ্চতা এবং প্রস্থ রয়েছে, তবে দ্বিতীয় ব্লকে padding সেট করা আছে, আর প্রথমটিতে - নেই। দেখুন, তাদের আকার কতটা আলাদা:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	margin-bottom: 10px;
	background: #f1f1f1;
}
#elem2 {
	padding: 50px;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

উদাহরণ . স্ট্যান্ডার্ড আচরণ

এখন উভয় ব্লকের একই উচ্চতা এবং প্রস্থ রয়েছে, তবে দ্বিতীয় ব্লকের জন্য 10px বর্ডার সেট করা আছে, আর প্রথমটির জন্য - নেই। দেখুন, তাদের আকার কতটা আলাদা:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	border: 10px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

উদাহরণ . স্ট্যান্ডার্ড আচরণ

এখন দ্বিতীয় ব্লকের padding এবং 10px বর্ডার উভয়ই রয়েছে:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	padding: 50px;
	border: 20px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

উদাহরণ . border-box মান

দ্বিতীয় এলিমেন্টে box-sizing বৈশিষ্ট্যের জন্য border-box মান যোগ করি। এখন প্রথম এবং দ্বিতীয় উভয় এলিমেন্টের আকার একই হয়ে যাবে:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	box-sizing: border-box;
	padding: 50px;
	border: 10px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

আরও দেখুন

বৈশিষ্ট্য outline,
যা একটি বর্ডার তৈরি করে, যা এলিমেন্টটিকে প্রসারিত করে না