🔖 বক্স মডেল (Box Model)
HTML এর প্রতিটি এলিমেন্টকে ব্রাউজার একটি চারকোনা বাক্স (Box) হিসেবে বিবেচনা করে। আপনি যখন কোনো এলিমেন্টকে ডিজাইন বা লেআউট করেন, তখন আপনাকে এই বক্স মডেল মেনেই কাজ করতে হয়।
📌 বক্স মডেলের ৪টি অংশ
যেকোনো HTML এলিমেন্টের বক্স মডেল ৪টি লেয়ার বা স্তর দিয়ে তৈরি:
১. Content (কন্টেন্ট)
বক্সের একদম ভেতরের অংশ, যেখানে মূল টেক্সট বা ছবি থাকে।
২. Padding (প্যাডিং)
কন্টেন্ট এবং বর্ডারের মাঝখানের ফাঁকা জায়গা। এটি এলিমেন্টের ভেতরের দিকে স্পেস তৈরি করে।
৩. Border (বর্ডার)
প্যাডিং এবং কন্টেন্টকে ঘিরে থাকা সীমানা।
৪. Margin (মার্জিন)
বর্ডারের বাইরের ফাঁকা জায়গা। এটি একটি এলিমেন্টকে অন্য এলিমেন্ট থেকে দূরে সরাতে সাহায্য করে।
.box {
width: 200px; /* কন্টেন্টের প্রস্থ */
padding: 20px; /* ভেতরের ফাঁকা জায়গা */
border: 5px solid; /* সীমানা */
margin: 30px; /* বাইরের ফাঁকা জায়গা */
}📌 🥷 নিঞ্জা টেকনিক: box-sizing: border-box
CSS এর ডিফল্ট বক্স মডেলে একটি বিশাল সমস্যা আছে!
সমস্যা: আপনি যদি কোনো বক্সের width: 200px দেন এবং এরপর padding: 20px ও border: 5px দেন, তাহলে ব্রাউজার টোটাল সাইজ হিসাব করবে:
200 (কন্টেন্ট) + 40 (ডানে-বামে প্যাডিং) + 10 (ডানে-বামে বর্ডার) = 250px!
অর্থাৎ, বক্সটি আপনার দেওয়া সাইজ থেকে বড় হয়ে লেআউট ভেঙে ফেলবে! 😱
নিঞ্জা সলিউশন: প্রফেশনাল ডেভেলপাররা প্রতিটি প্রোজেক্টের শুরুতেই নিচের জাদুকরী কোডটি লিখে নেন:
* {
box-sizing: border-box;
}কেন এটি জাদুকরী?
box-sizing: border-box ব্যবহার করলে, আপনি যে width সেট করবেন, প্যাডিং এবং বর্ডার সেই width এর ভেতরেই জায়গা করে নেবে! বক্স আর ফুলবে না, লেআউটও ভাঙবে না! 🎉