সিএসএস৩ বক্স সাইজ - Css3 Box Sizeing


box-sizing প্রপার্টি

কোন এইচটিএমএল এলিমেন্টের মোট উচ্চতা বা height এবং প্রস্থ বা width এর সাথে প্যাডিং এবং বর্ডার যুক্ত করে এলিমেন্টের আকার বা size নির্ধারণ করতে সিএসএস 3.0 এর box-sizing প্রোপার্টি ব্যবহার করা হয়।

এই <div> ছোট দেখাচ্ছে, কারণ এর প্রশস্ততা 300px এবং উচ্চতা 80px

এই <div> বড় দেখাচ্ছে, কারণ এর প্রশস্ততা 300px এবং উচ্চতা 80px এর সাথে চতুর্দিকে 20px প্যাডিং যুক্ত হয়েছে।


box-sizing প্রপার্টির ব্যবহার না করা

ওয়েব ব্রাউজার গুলো সাধারণত পূর্ব-নির্ধারিত বা default ভাবেই কোন এইচটিএমএল এলিমেন্ট এর প্রস্থ বা width এবং উচ্চতা বা height নিচের মত করে হিসেব করা হয়।

box-sizing প্রোপার্টি ব্যবহার না করা হয় তবে, কোন এইচটিএমএল এলিমেন্টের সাথে পূর্ব-নির্ধারিত বা default ভাবে বর্ডার ও প্যাডিং যুক্ত হয়, ফলে প্রয়োজনীয় মানের এলিমেন্টটি পাওয়া যায় না।

নিচের উদাহরণে একই উচ্চতা বা height এবং প্রস্থ বা width এর সাথে প্যাডিং যুক্ত এবং প্যাডিং ব্যতীত দুইটি div এলিমেন্ট অর্থাৎ <div> ট্যাগ দেখানো হলো।

এই <div> ছোট দেখাচ্ছে, কারণ এর প্রশস্ততা 300px এবং উচ্চতা 80px

এই <div> বড় দেখাচ্ছে, কারণ এর প্রশস্ততা 300px এবং উচ্চতা 80px এর সাথে চতুর্দিকে 20px প্যাডিং যুক্ত হয়েছে।

এখানে div এলিমেন্টটি বড় দেখাছে কারন প্রস্থ 300px এবং উচ্চতা 80px এর সাথেই চতুর্দিকে 20px এর প্যাডিং যুক্ত হয়েছে। ওপরের উদাহরণের জন্য নিচের সিএসএস স্টাইল কোড গুলো দেখুন।

উদাহরণ

.div1 {
  width: 300px;
  height: 80px;
  border: 2px solid red;
  }

.div2 {
  width: 300px;
  height: 80px;
  padding: 20px;
  border: 2px solid blue;
  }

কোড এডিটর



box-sizing প্রপার্টি ব্যবহার

কোন এইচটিএমএল এলিমেন্টের মোট প্রস্থ বা width এবং উচ্চতা bবা height এর সাথে প্যাডিং এবং বর্ডার যুক্ত করে এইচটিএমএল এলিমেন্টের আকার নির্ধারণ করতে সিএসএস 3.0 এর box-sizing প্রোপার্টি ব্যবহার করা হয়।

যদি কোন এইচটিএমএল এলিমেন্টে box-sizing প্রপার্টির মান border-box নির্ধারণ করা হয় তবে, ঐ এলিমেন্টের নির্ধারণকৃত আকার অর্থাৎ size (width এবং height) এর সাথে প্যাডিং এবং বর্ডারও যুক্ত হবে।

box-sizing: border-box; ব্যবহার করায় দুটি ডিভের সাইজ একই রকম দেখাচ্ছে !!!

দুটি ডিভের সাইজ একই রকম দেখাচ্ছে!!!

এখানে এক ধরনের উদাহরণ দেখান হয়েছে, ২ টি div এলিমেন্টেই box-sizing প্রপার্টির মান বা value, border-box নির্ধারণ করে দেয়া হয়েছে।

ওপরের উদাহরণ ২টির জন্য নিচের সিএসএস স্টাইল কোড গুলো দেখুন।

উদাহরণ

.div1 {
  width: 300px;
  height: 80px;
  border: 2px solid red;
  box-sizing: border-box;
  }

.div2 {
  width: 300px;
  height: 80px;
  padding: 20px;
  border: 2px solid blue;
  box-sizing: border-box;
  }

কোড এডিটর


box-sizing প্রোপার্টির মান border-box ব্যবহার অনেক বেশি সুবিধাজনক হওয়ায় অধিকাংশ ওয়েব ডেভেলপারই, ওয়েব পেইজের সকল এলিমেন্টেই এটা ব্যবহার করে থাকে।

নীচের সিএসএস স্টাইল কোড গুলো নিশ্চিত করে যে সকল এইচটিএমএল এলিমেন্ট গুলো আরও সুবিধাজনক ভাবে প্রদর্শিত হবে। অনেক ব্রাউজারই ইতমধহে box-sizing: border-box; প্রপার্টি ব্যবহার করছে, ফর্ম এলিমেন্টের জন্য। এতে করে ইনপুট টেক্সট এরিয়া ১০০% প্রস্থে প্রদর্শিত হয়।

সব এলিমেন্টেই এই box-sizing প্রপার্টির মান border-box নির্ধারণ করে দেয়াই নিরাপদ। আর জন্য নিচের উদাহরণে সিএসএস স্টাইল কোড গুলো দেখুন।

উদাহরণ

* {
  box-sizing: border-box;
  }

কোড এডিটর



box-sizing প্রোপার্টি

প্রোপার্টিমানবর্ণনা
box-sizing