box-sizing: border-box;
প্রতিটি ডিজাইনে আমরা এই CSS Property টা ইউজ করি। কিন্তু এটা কেনো ইউজ করা হয়, বা box-sizing property এর বাকি value গুলার ব্যবহার বিধি কি, তা জেনে রাখা উচিৎ। চলুন, এটা নিয়ে অল্প কিছু আলাপ করি।
box-sizing এর কাজ কি?
box-sizing প্রোপার্টি মূলত কোনো এলিমেন্টের height এবং width কিভাবে হিসাব করা হবে তা নির্ধারণ করে থাকে। যদি আপনি এলিমেন্টে padding বা border apply করে থাকেন, তখন অবশ্যই box-sizing সম্পর্কে ধারণা থাকা উচিৎ। বিপরীতে সাইজ নিয়ে ভালোই প্যারায় পরা লাগবে।
box-sizing এর প্রধানত দুইটা value রয়েছে।
১। content-box;
২। border-box;
এ দুটির মধ্যে border-box ই মূলত সবচেয়ে বেশি করা হয়। কারণ, border-box ইউজ করে কোনো এলিমেন্টের সাইজ সহজে control করা যায়।
চলুন, বিস্তারিত জানি।
content-box
content-box
box-sizing এর default value।
কোনো এলিমেন্টে এই value ব্যবহার দ্বারা বুঝায় যে, ওই এলিমেন্টের padding এবং border এলিমেন্টের মূল height এবং width এর বাইরে যোগ করে হিসাব করা হবে।
উদাহরণ দিই-
ধরুন, একটি এলিমেন্টের নির্দিষ্ট কিছু width ও height সেট করলাম।
.box {
width: 200px;
height: 100px;
}
এবার উক্ত এলিমেন্টে কিছু padding ও border যোগ করি।
.box {
width: 200px;
height: 100px;
border: 5px solid red;
padding: 10px;
}
এবার যদি আমরা ব্রাউজারে inspect করে এলিমেন্টের সাইজ দেখি তাহলে দেখা যাবে, এর সাইজ width-230px এবং height-130px দেখাচ্ছে।
এটা কেন হলো?
এর কারণ হচ্ছে, যেহেতু এই এলিমেন্টের box-sizing ডিফল্ট content-box করা, তাই এলিমেন্টের মূল height এবং width এ হাত দেয় নি। বরং padding এবং border কে মূল সাইজের বাইরে যোগ করে নতুন সাইজ হিসাব করে নিয়েছে। অর্থাৎ, সে নিজ ঘরে কাউকে ঢুকতে দেবে না ঠিক কিন্তু যারা আসবে নিজের সাথেই রাখবে। তবে, বাইরে!!
তাই width দেখাচ্ছে 200+10+10+5+5 = 230px এবং height দেখাচ্ছে 100+10+10+5+5 = 130px।
বি.দ্র.: আউটপুট ইচ্ছে করেই দিই নি। আপনারা নিজে করে দেখতে পারেন।
border-box
এবার আসি border-box নিয়ে। এটি অবশ্য content-box এর মতো এতোটা পাষান না। এর ব্যবহারে এলিমেন্টের কন্টেন্টগুলো মানে padding এবং border কে এর সেট করা height ও width এর ভিতরে রেখেই মোট size হিসাব করা করে। অর্থাৎ, সে নিজের ঘরের সীমানার ভিতরেই রাখে সবাইকে!!
চলুন, আগের এলিমেন্টের box-sizing এর ভ্যালু border-box করে দেখি।
.box {
width: 200px;
height: 100px;
border: 5px solid red;
padding: 10px;
box-sizing: border-box;
}
এবার যদি ব্রাউজারে inspect করে দেখি তখন দেখবো যে এর width এবং height ঠিক-ই 200px এবং 100px রয়েছে।
অর্থাৎ, এলিমেন্টের সাইজ যা সেট করা হয়েছিলো, তা আগের মতোই আছে। padding বা border এর কারণে বৃদ্ধি পায় নি। বরং মূল সাইজের ভিতরেই padding এবং border এর জন্য জায়গা করে দিয়েছে।
এখানে একটা বিষয় মাথায় রাখা লাগবে, border-box এর কারণে যেহেতু padding এবং border মোট height-width এর ভিতরে হিসাব করা হয়, তাই ভিতরের মূল element এর size কিন্তু কমবে। অন্যকে জায়গা করে দিলে তো, নিজেকে একটু ছাড় দিতেই হবে!!
আশা করি বুঝেছেন box-sizing: border-box; কতটা উপকারি কোনো এলিমেন্টের সাইজ control করার জন্য। ঠিক এই কারণেই stylesheet এর শুরুতেই এটি ব্যবহার করা হয়, যাতে sizing নিয়ে কোনো ঝামেলায় না পরা লাগে। ধন্যবাদ।