যখন আমরা CSS-এ একটি উপাদানের প্রস্থ এবং উচ্চতা সেট করি তখন প্রায়শই উপাদানটি প্রকৃত আকারের চেয়ে বড় দেখায়। কারণ ডিফল্টরূপে, প্যাডিং এবং বর্ডার উপাদানটির প্রস্থ এবং উচ্চতায় যোগ করা হয় এবং তারপর উপাদানটি প্রদর্শিত হয়৷
বক্স সাইজিং প্রপার্টিটিতে প্রকৃত প্রস্থ এবং উচ্চতা সহ একটি উপাদানের প্যাডিং এবং সীমানা অন্তর্ভুক্ত থাকে যাতে উপাদানটি প্রকৃত আকারের চেয়ে বড় না হয়৷ এই বৈশিষ্ট্যটি ব্যবহার করার বিন্যাস হল "বক্স-সাইজিং:বক্স-বর্ডার"
উদাহরণ
আপনি পাঠ্য সারিবদ্ধ করতে নিম্নলিখিত কোডটি চালানোর চেষ্টা করতে পারেন এবং একই প্রস্থে বাক্সগুলি নির্বাচন করতে পারেন −
<html>
<head>
<style>
input, select {
width: 250px;
border: 2px solid #000;
padding: 0;
margin: 0;
height: 22px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
text-indent: 3px;
}
</style>
</head>
<body>
<input type = "text" value = "Name of Candidate"><br>
<select>
<option>Select Choice</option>
<option>Student</option>
<option>Teachers</option>
<option>Head</option>
</select>
</body>
</html> 