box-sizing নিয়ন্ত্রণ করে যে width এবং height বৈশিষ্ট্যগুলি প্রকৃতপক্ষে কী পরিমাপ করে। ডিফল্ট (content-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 লেআউট-ম্যাথ মাথাব্যথার একক সবচেয়ে সাধারণ উৎস দূর করে — প্রতিটি প্রস্থের জন্য মানসিকভাবে প্যাডিং এবং সীমানা যোগ করতে হবে।
এটি বৈশ্বিকভাবে সেট করা একটি সেরা-অনুশীলন ডিফল্ট হিসাবে বিবেচনা করা হয়, কারণ "আমি যে প্রস্থ সেট করি তা হল প্রস্থ যা আমি পাই" হল কীভাবে আপনি স্বাভাবিকভাবে আকার নির্ধারণ কাজ করার প্রত্যাশা করেন।
বিস্তারিত উত্তরসহ IT ইন্টারভিউ প্রশ্নের একটি লাইব্রেরি — জুনিয়র থেকে সিনিয়র পর্যন্ত।
দান করুন