কিভাবে CSS বক্স সাইজিং প্রপার্টি কাজ করে

কিভাবে CSS box-sizing ব্যবহার করতে হয় তা জানুন ব্রাউজার কীভাবে আপনার HTML উপাদানগুলির প্রস্থ এবং উচ্চতা গণনা করে এবং রেন্ডার করে তা নিয়ন্ত্রণ করার জন্য সম্পত্তি৷

বক্স-সাইজিং (কন্টেন্ট-বক্স বনাম বর্ডার-বক্স)

CSS box-sizing সম্পত্তির দুটি মান আছে:

• content-box (ডিফল্ট)
• border-box

উভয় বক্স-সাইজিং মান প্রভাবিত করে কিভাবে ব্রাউজার এইচটিএমএল উপাদানগুলির আকার গণনা করে এবং রেন্ডার করে, তবে এটিই একমাত্র জিনিস যা তাদের মধ্যে মিল রয়েছে৷

কন্টেন্ট-বক্স

ডিফল্টরূপে সমস্ত HTML উপাদান content-box ব্যবহার করে মান:

box-sizing: content-box;

এর মানে হল যে আপনার যদি নিম্নলিখিত শৈলী সহ একটি উপাদান থাকে:

div {
  width: 100px;
  height: 100px;
  padding: 16px;
  border: 1px solid;
}

তারপর সেই উপাদানটির প্রস্থ এবং উচ্চতা 134px হিসাবে গণনা করা হয়, 100px নয় যেমন আপনি আপনার CSS স্টাইলশীটে উল্লেখ করেছেন। ফলাফল:

আপনি যদি নিজের জন্য আকার পরীক্ষা করতে চান তবে আপনার ব্রাউজারগুলিকে সক্ষম করুন এলিমেন্ট ইন্সপেক্টর এই কমান্ডের সাথে:

• ম্যাক:Cmd + Shift + C
• উইন্ডোজ:Ctrl + Shift + C

তারপর উপরের উপাদানটির আকার দেখতে আপনার মাউসের উপর নিয়ে যান৷

এটি ঘটে কারণ content-box বর্ডার (1px) এর সাথে প্রস্থ/উচ্চতার মান একসাথে যোগ করে প্রতিটি পাশে) এবং প্যাডিং (16px প্রতিটি দিকে) মান, এবং সেই মানের সমষ্টিতে উপাদানের আকার রেন্ডার করে:

• উপাদানের প্রস্থ:1 + 16 + 100 + 16 + 1 =134 পিক্সেল।
• উপাদানের উচ্চতা:1 + 16 + 100 + 16 + 1 =134 পিক্সেল।

content-box থেকে এই ডিফল্ট আচরণ এর সাথে কাজ করা বেশ বিরক্তিকর হতে পারে, কিন্তু ভাগ্যক্রমে, এটি পরিবর্তন করা সহজ!

ডিফল্ট box-sizing: content-box ঘোষণাটি ব্যবহারকারী এজেন্ট স্টাইলশীট থেকে উত্তরাধিকারসূত্রে পাওয়া যায়, যা সমস্ত ওয়েব ব্রাউজারে তৈরি করা হয়।

উদ্ধারে বর্ডার-বক্স

আপনি সহজেই content-box ওভাররাইড করতে পারেন border-box এর সাথে মান মান, যা ব্রাউজার কীভাবে উপাদানগুলির আকার গণনা করে তার উপর বিপরীত প্রভাব ফেলে:

box-sizing: border-box;

আপনার box-sizing সেট করে border-box এর সম্পত্তি ব্রাউজার আপনার উপাদানগুলিকে সুনির্দিষ্ট প্রস্থ এবং উচ্চতায় রেন্ডার করবে যা আপনি উপাদানটিতে height দিয়ে নির্দিষ্ট করেছেন এবং width বৈশিষ্ট্য:

div {
  width: 100px;
  height: 100px;
  padding: 16px;
  border: 1px solid;
  box-sizing: border-box; 
}

ফলাফল:

border-box মান ব্রাউজারকে অন্তর্ভুক্ত করে (যোগ না) নির্দিষ্ট প্যাডিং এবং সীমানা মান যখন এটি উপাদানের মোট প্রস্থ এবং উচ্চতা গণনা করে।

border-box সহ , যাই হোক না কেন padding অথবা border আপনি আপনার উপাদানে যে মান যোগ করবেন, উপাদানটির মোট আকার হবে সেই মান যা আপনি height-এ উল্লেখ করেছেন এবং width বৈশিষ্ট্য।

ভাল পরিমাপের জন্য এখানে একটি পাশাপাশি তুলনা করা হল:

উপরের উভয় উপাদানেরই নির্দিষ্ট প্রস্থ এবং উচ্চতা 100 পিক্সেল, কিন্তু শুধুমাত্র 2য় উপাদান সেই নির্দিষ্ট মানগুলিকে সম্মান করে কারণ এটি border-box ব্যবহার করে .

content-box বনাম border-box সারসংক্ষেপ:

• content-box উপাদানের উচ্চতা/প্রস্থ মানের সাথে প্যাডিং এবং সীমানা মানকে একত্রিত করে এবং মোট রেন্ডার করে।
• border-box উপাদানটির প্রস্থ/উচ্চতার অংশ হিসাবে প্যাডিং এবং সীমানা মান অন্তর্ভুক্ত করে।

সবকিছুতে বর্ডার-বক্স ব্যবহার করুন

এখন আপনি জানেন যে border-box ব্রাউজারগুলিকে HTML উপাদানগুলিকে আপনার CSS-এ নির্দিষ্ট করা প্রকৃত আকারে রেন্ডার করে। কিন্তু কিভাবে আপনি border-box প্রয়োগ করবেন আপনার সমস্ত HTML উপাদানে?

এটি খুব শীর্ষে নিম্নলিখিত CSS নিয়ম-সেট যোগ করার মতোই সহজ আপনার স্টাইলশীটের:

*, *:before, *:after {
  box-sizing: border-box;
}

উপরের কোডটি CSS এর সর্বজনীন নির্বাচক * ব্যবহার করে border-box প্রয়োগ করতে box-sizing এর মান এ সম্পত্তি:

• সমস্ত স্বাভাবিক উপাদান নির্বাচক (div , p , button , ইত্যাদি)
• সমস্ত :before এবং :after ছদ্ম নির্বাচক

border-box ব্যবহার করে আপনার সমস্ত HTML উপাদানগুলিতে, আপনার ব্রাউজারটি কীভাবে আপনার উপাদানগুলির আকার রেন্ডার করে তা নিয়ে আপনাকে আর চিন্তা করতে হবে না৷ এটি সর্বদা আপনার নিজের নির্দিষ্ট উচ্চতা এবং প্রস্থ হবে৷