CSS Box Sizing

CSS Box Sizing

CSS box-sizing প্রতিশব্দ আমাদের উপাদানের মোট প্রস্থ এবং উচ্চতা ইনার প্যাডিং (পুলিং) এবং বর্তানা অন্তর্ভুক্ত করার অনুমতি দেয়。

যদি CSS box-sizing প্রতিশব্দ নির্ধারিত না হয়

ডিফল্টে, উপাদানের প্রস্থ এবং উচ্চতা এইভাবে গণনা করা হয়:

  • width + padding + border = উপাদানের কার্যকারী প্রস্থ
  • height + padding + border = উপাদানের কার্যকারী উচ্চতা

এর মানে হল: যখন আপনি উপাদানের প্রস্থ/উচ্চতা নির্ধারণ করেন, উপাদান সাধারণত আপনার নির্ধারিত বেশি দেখা যাবে (কারণ উপাদানের বর্তানা এবং ইনার প্যাডিং উপাদানের নির্ধারিত প্রস্থ/উচ্চতায় যুক্ত হয়)。

মধ্যকার চিত্র দুটি একই নির্ধারিত প্রস্থ এবং উচ্চতা সম্পন্ন <div> ইলাকা প্রদর্শন করে:

এই div ছোট
（প্রস্থ 300px, উচ্চতা 100px）。
এই div বড়
（প্রস্থও 300px, উচ্চতা 100px）。

উপরের দুটি <div> ইলাকা ফাইনাল ফলাফলে ভিন্ন মাপ দেখা যাবে (কারণ div2-এর ইনার প্যাডিং নির্ধারিত হয়):

ইনস্ট্যান্স

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

আপনার নিজের করে চেষ্টা করুন

box-sizing প্রতিশব্দ এই সমস্যা সমাধান করে

যদি CSS box-sizing প্রতিশব্দ ব্যবহার করা হয়

box-sizing এই প্রতিশব্দ আমাদের উপাদানের মোট প্রস্থ এবং উচ্চতা সম্প্রসারিত করার অনুমতি দেয়。

যদি উপাদানের ওপর নির্ধারিত হয় box-sizing: border-box;তাহলে, প্রস্থ এবং উচ্চতা ইনার প্যাডিং এবং বর্তানা অন্তর্ভুক্ত হবে:

এখন দুটি div এর মাপ একই!
Hooray!

এই উদাহরণ উপরের উদাহরণের সমম্যাক হয়, দুটি <div> ইলাকা উভয়ই নিয়োজিত হয় box-sizing: border-box;：

ইনস্ট্যান্স

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

আপনার নিজের করে চেষ্টা করুন

কারণ ব্যবহার করা হয় box-sizing: border-box; এই পদ্ধতির কাজ করে ভালভাবে, বহু ডেভেলপারও পৃষ্ঠার সকল ইলিমেন্টকে এইভাবে কাজ করতে চায়।

এই কোডটি সকল ইলিমেন্টের মাপ পরিবর্তন করার একটি স্বাভাবিক পদ্ধতি নিশ্চিত করতে সক্ষম হবে।বহু ব্রাউজারগুলো এখনও বহু ফর্ম ইলিমেন্টের জন্য box-sizing: border-box;（কিন্তু সবই নয় - এটা হলো কারণ input ও textarea width: 100%; সময় আলাদা দেখা যায়）。

সকল ইলিমেন্টের উপর এটা আপনাকে নিরাপদ ও মেধাবীভাবে প্রয়োগ করতে সহায়তা করবে:

ইনস্ট্যান্স

* {
  box-sizing: border-box;
}

আপনার নিজের করে চেষ্টা করুন

CSS Box Sizing এট্রিবিউট

এট্রিবিউট বর্ণনা
box-sizing এলিমেন্টের প্রস্থ ও উচ্চতা নির্ধারণ করার পদ্ধতি: তারা ইনপুট ও টেক্সটএডিটরের প্যাডিং ও বর্তফালের অন্তর্ভুক্ত করা উচিত কি না?