X

X

X

CSS Box Model ব্যবহার করা নিয়ম


CSS Box Model

HTML এ সব ইলামেন্টেকে বক্স হিসেবে বিবেচনা করা যায়। CSS -এ ডিজাইন এবং লেআউট তৈরি করার জন্য “box model” টার্মটি ব্যবহার করা হয়। প্রতিটি বক্স (ইলামেন্টে ) মার্জিন, বর্ডার, প্যাডিং, কন্টেন্ট ইত্যাদি নিয়ে গঠিত।

নিচের চিত্রে বক্স মডেল সম্পর্কে ধারণা দেওয়া হলো:

বক্স মডেলের বিভিন্ন অংশের বর্ণনা:

  • Content – এই অংশে ইলামেন্টের কন্টেন্ট উপস্থাপিত হয়।
  • Padding – বর্ডার এবং কন্টেটের মাঝামাঝি ফাঁকা জায়গা তৈরি করার জন্য এটি ব্যবহৃত হয়।
  • Border – মার্জিন এবং প্যাডিং এর মাঝাশাঝি জায়গায় বর্ডার তৈরি করার জন্য এটি ব্যবহৃত হয়।
  • Margin – অন্যান্য ইলামেন্টের সাথে কোনো ইলামেন্টের দূরত্ব তৈরি করার জন্য এটি ব্যবহৃত হয়।

বক্স মডেলের সাহায্যে কোনো ইলামেন্টর চারপাশে মার্জিন, বর্ডার, প্যাডিং ইত্যাদি তৈরি করা যায়।

Code Example

<style>
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


কোনো ইলামেন্টের দৈর্ঘ্য ও প্রস্থ

আগের অধ্যায়ে ধারণা দেওয়া হয়েছে , কিভাবে একটি ইলামেন্টের দৈর্ঘ্য ও প্রস্থ সেট করা যায়। কিন্তু সঠিকভাবে দৈর্ঘ্য ও প্রস্থ সেট করার জন্য বক্স মডেলে সম্পর্কে ধারণা থাকা আবশ্যক।

লক্ষণীয়: যখন স্বাভাবিক অবস্থায় কোনো ইলামেন্টের দৈর্ঘ্য ও প্রস্থ সেট করা হয়, তখন এটি উক্ত ইলামেন্টের কন্টেন্টের ক্ষেত্র প্রযোজ্য হয়। 

মনে করুন, <div> ইলামেন্টের প্রস্থ 350px সেট করবেন:

Code Example

<style>
div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

কাজটি কিভাবে করবেন তার বর্ণনা নিচে গাণিতিকভাবে উপস্থাপণ করা হলো:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

কোনো ইলামেন্টের সর্বমোট প্রস্থ সেট করার নিয়মটি নিচের দেওয়া হলো:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

কোনো ইলামেন্টের সর্বমোট উচ্চতা বা দৈর্ঘ্য সেট করার নিয়মটি নিচের দেওয়া হলো:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

IE এর পুরাতন ভার্শনগুলো জন্য লক্ষ্যনীয় বিষয়: Internet Explorer 8 এবং এর পুরোনো ভার্শনগুলোয় ইলামেন্টের প্যাডিং এবং বর্ডার width প্রপার্টির অন্তর্ভুক্ত হিসেবে বিবেচনা করা হয়। এই সমস্যাটি দূর করার জন্য প্রতিটি পেজের শুরুতে অবশ্যই <!DOCTYPE html> যুক্ত করবেন।