box-sizing নিয়ন্ত্রণ করে যে width এবং height বৈশিষ্ট্যগুলি প্রকৃতপক্ষে কী পরিমাপ করে। ডিফল্ট (content-box) শুধুমাত্র বিষয়বস্তু পরিমাপ করে; border-box সেগুলিকে প্যাডিং এবং সীমানা অন্তর্ভুক্ত করে তোলে।
box-sizing নিয়ন্ত্রণ করে যে width এবং height বৈশিষ্ট্যগুলি প্রকৃতপক্ষে কী পরিমাপ করে। ডিফল্ট (content-box) শুধুমাত্র বিষয়বস্তু পরিমাপ করে; border-box সেগুলিকে প্যাডিং এবং সীমানা অন্তর্ভুক্ত করে তোলে।
.box {
box-sizing: content-box; /* the default */
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200 + 2×20 + 2×5 = 250px ← bigger than you asked for! */
content-box এর সাথে, প্যাডিং এবং সীমানা width এর উপরে যোগ করা হয়, তাই উপাদানটি আপনি যে সংখ্যাটি সেট করেছেন তার চেয়ে বিস্তৃত হয়ে যায়। এটি লেআউট ভেঙে দেয়: প্যাডিং সহ একটি width: 50% বাক্স তার 50% ওভারফ্লো করে।
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
border-box এর সাথে, width হল চূড়ান্ত রেন্ডারড প্রস্থ — প্যাডিং এবং সীমানা অভ্যন্তরীণ থেকে বিয়োগ করা হয়। আপনি যে সংখ্যাটি সেট করেন তা হল আপনি যে আকারটি পান, যা অনেক বেশি স্বজ্ঞাত।
*, *::before, *::after {
box-sizing: border-box;
}
প্রায় প্রতিটি আধুনিক স্টাইলশীট, ফ্রেমওয়ার্ক এবং রিসেট এটি বিশ্বব্যাপী প্রয়োগ করে। এটি আকার নির্ধারণকে অনুমানযোগ্য করে তোলে: width: 50% + প্যাডিং ঠিক 50% প্রস্থে থাকে, দুটি width: 50% বাক্স পাশাপাশি বসে ওভারফ্লো ছাড়াই, ইত্যাদি।
border-box লেআউট-ম্যাথ মাথাব্যথার একক সবচেয়ে সাধারণ উৎস দূর করে — প্রতিটি প্রস্থের জন্য মানসিকভাবে প্যাডিং এবং সীমানা যোগ করতে হবে।
এটি বৈশ্বিকভাবে সেট করা একটি সেরা-অনুশীলন ডিফল্ট হিসাবে বিবেচনা করা হয়, কারণ "আমি যে প্রস্থ সেট করি তা হল প্রস্থ যা আমি পাই" হল কীভাবে আপনি স্বাভাবিকভাবে আকার নির্ধারণ কাজ করার প্রত্যাশা করেন।