বৈশিষ্ট্য box-sizing

বৈশিষ্ট্য box-sizing এলিমেন্টের আকার গণনার পদ্ধতি পরিবর্তন করতে দেয়।

ডিফল্টভাবে padding যোগ করা এলিমেন্টটিকে প্রসারিত করে: যদি আমরা প্রস্থ width 100px এবং padding-left 20px সেট করি, তাহলে এলিমেন্টের প্রকৃত প্রস্থ হবে 120px।

আর যদি আমরা border-left 10px ও সেট করি, তাহলে এলিমেন্টের প্রকৃত প্রস্থ হয়ে যাবে 130px। অর্থাৎ padding এবং border ব্লকটিকে প্রসারিত করে (প্রস্থ এবং উচ্চতা উভয় ক্ষেত্রেই)। এই আচরণ box-sizing ব্যবহার করে পরিবর্তন করা যাবে।

সিনট্যাক্স

cssসিলেক্টর {
  box-sizing: content-box | border-box;
}

মানসমূহ

ডিফল্ট মান: content-box।

উদাহরণ . স্ট্যান্ডার্ড আচরণ

এখন উভয় ব্লকের একই উচ্চতা এবং প্রস্থ রয়েছে, তবে দ্বিতীয় ব্লকে padding সেট করা আছে, আর প্রথমটিতে - নেই। দেখুন, তাদের আকার কতটা আলাদা:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  margin-bottom: 10px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

উদাহরণ . স্ট্যান্ডার্ড আচরণ

এখন উভয় ব্লকের একই উচ্চতা এবং প্রস্থ রয়েছে, তবে দ্বিতীয় ব্লকের জন্য 10px বর্ডার সেট করা আছে, আর প্রথমটির জন্য - নেই। দেখুন, তাদের আকার কতটা আলাদা:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

উদাহরণ . স্ট্যান্ডার্ড আচরণ

এখন দ্বিতীয় ব্লকের padding এবং 10px বর্ডার উভয়ই রয়েছে:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  border: 20px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

উদাহরণ . border-box মান

দ্বিতীয় এলিমেন্টে box-sizing বৈশিষ্ট্যের জন্য border-box মান যোগ করি। এখন প্রথম এবং দ্বিতীয় উভয় এলিমেন্টের আকার একই হয়ে যাবে:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  box-sizing: border-box;
  padding: 50px;
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

আরও দেখুন