সিএসএস বক্স মডেল (CSS Box Model): একটি হাউ-টু গাইড

ব্রাউজার সিএসএস বক্স মডেল ব্যবহার করে নির্ধারণ করে কীভাবে একটি এলিমেন্ট ওয়েব পেজে দেখাবে। বক্স মডেল একটি এলিমেন্টের সাইজ এবং এর বর্ডার (border), প্যাডিং (padding), এবং মার্জিন (margins) কে রিপ্রেজেন্ট করে। আপনি এই প্রতিটি এলিমেন্টকে আলাদাভাবে স্টাইল করতে পারেন।

প্রতিটি এলিমেন্ট একটি বক্স দিয়ে ঘেরা থাকে। এই বক্সগুলো কীভাবে কাজ করে সেটা বুঝতে পারা ওয়েব পেজে আইটেমগুলো আপনার পছন্দমত পজিশন করার জন্য অপরিহার্য।

সিএসএস বক্স মডেল ব্যবহার করা হয় কীভাবে একটি বক্স দেখাবে, এবং কীভাবে সেটা ওয়েব পেজে পজিশন হবে সেটা নির্ধারণ করার জন্য। এই মডেল বক্সের চারটি কম্পোনেন্ট – কন্টেন্ট (content), প্যাডিং (padding), বর্ডার (border), এবং মার্জিন (margin) – কে রেফার করে। এই টিউটোরিয়াল সিএসএস বক্স মডেলের বেসিক এবং এর মূল অংশগুলো আলোচনা করবে।

সিএসএস বক্স মডেল

সিএসএস বক্স মডেল হলো সিএসএস-এ সকল বক্সে প্রয়োগ হওয়া স্ট্রাকচার। এই বক্স মডেল ব্রাউজারকে নির্দেশ দেয় কীভাবে একটি বক্সের বিভিন্ন অংশ একটি এলিমেন্ট তৈরি করে যা ওয়েব পেজে দেখাবে। বক্স মডেল একটি বক্সের কন্টেন্ট, প্যাডিং, বর্ডার, এবং মার্জিন কে রিপ্রেজেন্ট করে।

চলুন বক্স মডেলের প্রতিটি এলিমেন্টের দিকে তাকাই:

• Content (কন্টেন্ট)। বক্সের কন্টেন্ট, যেখানে টেক্সট, ফর্ম, ইমেজ, এবং অন্যান্য ওয়েব এলিমেন্ট দেখাবে।
• Padding (প্যাডিং)। একটি বক্সের কন্টেন্ট এবং বক্সের বর্ডার এর মধ্যবর্তী স্পেস। বক্সের প্যাডিং ট্রান্সপেরেন্ট (transparent)।
• Border (বর্ডার)। একটি বক্সের কন্টেন্টের চারপাশে যে বর্ডার থাকে, বা প্যাডিং এর চারপাশে যদি প্যাডিং ভ্যালু স্পেসিফাই করা থাকে।
• Margin (মার্জিন)। একটি বর্ডারের আউটার এজ (outer edge) এবং ওয়েব পেজের অন্যান্য এলিমেন্টের মধ্যবর্তী স্পেস। বক্সের প্যাডিং ট্রান্সপেরেন্ট। (নোট: এখানে মূলত মার্জিন ট্রান্সপেরেন্ট।)

চলুন প্রতিটি কম্পোনেন্ট এবং কীভাবে সেগুলো ব্যবহার করতে হয় সেটা একে একে আলোচনা করি।

কন্টেন্ট এরিয়া (The Content Area)

কন্টেন্ট এরিয়া বক্স মডেলের কেন্দ্রে থাকে। এখানেই টেক্সট, ইমেজ, এবং অন্যান্য এলিমেন্ট ওয়েব এলিমেন্টে দেখাবে। আমরা height এবং width সিএসএস প্রপার্টি ব্যবহার করি কন্টেন্ট এরিয়ার সাইজ নির্ধারণের জন্য।

ডিফল্টভাবে, একটি কন্টেন্ট এরিয়ার এর সাইজ এর এলিমেন্টের সাইজের সমান হয়। আপনার যদি একটি টেক্সট লাইন থাকে, তবে বক্সটি টেক্সট লাইনটারitectonic লম্বা এবং লম্বা হবে।

মনে করুন আমরা একটি বক্স ডিজাইন করতে চাই যা ২০০px লম্বা এবং ২০০px প্রস্থ। আমরা নিচের কোড দিয়ে করতে পারি:

<html> <p>This is a box.</p> </html> <style> p { height: 200px; width: 200px; } </style>

উপরের কোড এডিটরে বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।

আমরা একটি HTML

ট্যাগ ব্যবহার করলাম একটি প্যারাগ্রাফ টেক্সট তৈরি করতে। মনে রাখবেন, ওয়েব ডিজাইনে প্রতিটি এলিমেন্ট একটি বক্সে থাকে, তাই বক্স মডেল আমাদের

ট্যাগে প্রযোজ্য হবে। আমাদের সিএসএস কোডে, আমরা একটি রুল তৈরি করলাম যা সকল

ট্যাগের height ২০০px সেট করে। আমরা সকল

ট্যাগের width ২০০px ও সেট করলাম।

width এবং height, এবং সিএসএস কন্টেন্ট এরিয়া সম্পর্কে আরও জানতে, আমাদের CSS height and width বেসিক গাইড পড়ুন।

প্যাডিং এরিয়া (The Padding Area)

প্যাডিং এরিয়া কন্টেন্ট এরিয়াকে এক্সটেন্ড (extend) করে। এটি একটি বক্সের কন্টেন্ট এবং এর বর্ডার এর মাঝপথে একটি গ্যাপ (gap) তৈরি করে। প্যাডিং ব্যবহার করা হয় অনেক সময় ব্যানার (banners) এবং অন্যান্য ঘোষণার এলিমেন্ট তৈরি করতে।

একটি বক্সে প্যাডিং প্রয়োগ করতে, আমরা সিএসএস padding প্রপার্টি ব্যবহার করতে পারি। মনে করুন আমরা আমাদের শেষ বক্সের চারপাশে ২৫px প্যাডিং প্রয়োগ করতে চাই। আমরা নিচের কোড দিয়ে করতে পারি:

<html> <p>This is a box.</p> </html> <style> p { height: 200px; width: 200px; padding: 20px; } </style>

উপরের কোড এডিটরে বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।

আমরা "padding" প্রপার্টি স্পেসিফাই করলাম এবং এর ভ্যালু ২০px সেট করলাম। এটি আমাদের বক্সের কন্টেন্ট এরিয়া এবং বক্সের বর্ডার এর মাঝপথে ২০px গ্যাপ তৈরি করে।

এখন আমাদের বক্স এবং পেজের এজ (edge) এর মাঝপথে একটি গ্যাপ আছে।

বর্ডার এরিয়া (The Border Area)

বর্ডার এরিয়া হলো যেখানে একটি বক্সের বর্ডার দেখাবে। বর্ডার হয় যেকোনো প্যাডিংর বাইরে কালারড আউটলাইন (colored outlines)। আপনি যেকোনো রঙ ব্যবহার করে বর্ডার স্টাইল করতে পারেন। বর্ডারের জন্য অনেক বিল্ট-ইন ডিজাইন (built-in designs) রয়েছে।

মনে করুন আমরা আমাদের বক্সের চারপাশে ৫px প্রস্থের হালকা নীল (light blue) বর্ডার যোগ করতে চাই। আমরা নিচের কোড দিয়ে করতে পারি:

<html> <p>This is a box.</p> </html> <style> p { height: 200px; width: 200px; padding: 20px; border: 5px solid lightblue; } </style>

উপরের কোড এডিটরে বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।

আমরা সিএসএস "border" প্রপার্টি ব্যবহার করলাম ৫px প্রস্থের হালকা নীল বর্ডার ডিফাইন করতে। এই বর্ডার "solid" স্টাইল ব্যবহার করে, যা একটি সিঙ্গেল-লাইন বর্ডার তৈরি করে। লক্ষ্য করুন আমাদের বর্ডার আমাদের বক্সের কন্টেন্ট থেকে আলাদা। এর কারণ হচ্ছে আমরা আমাদের বক্সের চারপাশে ২০px প্যাডিং স্পেসিফাই করেছি।

মার্জিন এরিয়া (The Margin Area)

মার্জিন এরিয়া বক্স মডেলের আউটারমোস্ট লেয়ার (outermost layer)। এই এলিমেন্টটি একটি খালি গ্যাপ তৈরি করে যা একটি এলিমেন্টকে ওয়েব পেজের অন্যান্য এলিমেন্ট থেকে আলাদা করে।

মনে করুন আমরা ওয়েব পেজে দুটি বক্সের মাঝপথে ১০px স্পেস তৈরি করতে চাই। আমরা নিচের কোড দিয়ে করতে পারি:

<html> <p>This is a box.</p> <p>This is another box.</p> </html> <style> p { height: 200px; width: 200px; padding: 20px; border: 5px solid lightblue; margin: 10px; } </style>

উপরের কোড এডিটরে বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।

এবার, আমরা আমাদের HTML ফাইলে দুটি বক্স স্পেসিফাই করলাম। তারপর, আমরা "margin" প্রপার্টি ব্যবহার করে আমাদের বক্সে ১০px মার্জিন প্রয়োগ করলাম।

আপনি দেখতে পাচ্ছেন, এখন আমাদের বক্সগুলোর মাঝপথে ১০px গ্যাপ আছে। এর কারণ হচ্ছে আমরা আমাদের বক্সে মার্জিন প্রয়োগ করলাম। এটি আমাদের বক্সের বর্ডার এবং ওয়েব পেজের অন্যান্য এলিমেন্টের মাঝপথে একটি গ্যাপ তৈরি করে।

মার্জিন এরিয়া সম্পর্কে আরও জানতে, আমাদের CSS margin টিউটোরিয়াল পড়ুন।

প্রস্থ এবং উচ্চতা ক্যালকুলেশন (Width and Height Calculations)

বিগিনাররা (beginners) যা একটা ভুল করেন সেটা হচ্ছে অনুমান করা যে একটি এলিমেন্টের height এবং width এর প্যাডিং, মার্জিন, এবং বর্ডার একাউন্ট (account) করে। এটি সঠিক নয়।

height এবং width প্রপার্টিগুলো আপনাকে একটি ওয়েব এলিমেন্টের কন্টেন্ট এরিয়া এর height এবং width সেট করতে দেয়। এটি ওয়েব পেজের অন্যান্য এলিমেন্টের হিসাব নही নেয়।

আমরা যদি জানতে চাই আমাদের পুরো বক্স উদাহরণ (আগের সেকশন থেকে) কত স্পেস নেয়, তবে আমাদের একটি কুইক ক্যালকুলেশন চালাতে হবে। এখানে আমরা যেসব ভ্যালু স্পেসিফাই করলাম "মার্জিন এরিয়া" উদাহরণে:

• Height: 200px
• Width: 200px
• Padding: 20px
• Margin: 10px
• Border: 5px

প্রস্থ (width) ক্যালকুলেট করতে, আমরা নিচের ফর্মুলা ব্যবহার করতে পারি:

• 200px (width) +
• 40px (left and right padding) +
• 10px (left and right border) +
• 20px (left and right margin)

এটি আমাদের মোট 270px দেয়।

উচ্চতা (height) ক্যালকুলেট করতে, আমরা বক্সের height ব্যবহার করব। আমরা প্যাডিং, বর্ডার, এবং মার্জিনের টপ এবং বটম ভ্যালুও ব্যবহার করব।

উপসংহার

সিএসএস বক্স মডেল হলো একটি ওয়েব পেজে এলিমেন্ট রেন্ডার (render) করার জন্য ব্যবহৃত স্ট্রাকচার। HTML-এ প্রতিটি এলিমেন্ট একটি রেক্ট্যাঙ্গুলার বক্স (rectangular box)। বক্স মডেল ডিফাইন করে কীভাবে কন্টেন্ট, প্যাডিং, বর্ডার, এবং মার্জিন একটি বক্সের জন্য দেখাবে।

আপনি কি সিএসএস দিয়ে ওয়েব পেজ ডিজাইন সম্পর্কে আরও জানতে চান? আমাদের How to Learn CSS গাইড চেক আউট করুন। এই গাইডে শীর্ষ লার্নিং রিসোর্সের (top learning resources) একটি তালিকা রয়েছে যা আপনি আপনার সিএসএস জ্ঞান বিল্ড (build) করতে ব্যবহার করতে পারেন।