CSS Box Sizing

CSS Box Sizing

CSS box-sizing پروپرٹی عناصر کی کل چوڑائی اور اونچائی میں کافی میٹر (padding) اور فریم (border) شامل کرانے کی اجازت دیتا ہے。

اگر آپ نے CSS box-sizing پروپرٹی طے نہ کیا تو

جب تک آپ نے CSS box-sizing پروپرٹی طے نہ کی تو عناصر کی چوڑائی اور اونچائی کا حساب این چا ہوتا ہے:

  • width + padding + border = عناصر کی حقیقی چوڑائی
  • height + padding + border = عناصر کی حقیقی اونچائی

یعنی: جب آپ عناصر کی چوڑائی/اونچائی کو طے کرتے ہیں تو عناصر عام طور پر آپ کے طے کردہ چوڑائی/اونچائی سے بڑا تر دیکھائی دیتے ہیں (چونکہ عناصر کا فریم اور کافی میٹر (padding) عناصر کی طے کردہ چوڑائی/اونچائی میں شامل کئے جاتے ہیں)۔

ایک دوسرے کے ساتھ ایک ساتھ چوڑائی اور اونچائی کا ذکر کئے گئے دونوں <div> عناصر کو درج کیا گیا ہے:

یہ div چھوٹا تر ہے
، چوڑائی 300px، اونچائی 100px)۔
یہ div بڑا تر ہے
، چوڑائی بھی 300px، اونچائی 100px)۔

علاوہ ازیں دونوں <div> عناصر نتیج میں مختلف انداز میں نمودار ہوتی ہیں (چونکہ div2 میں کافی میٹر (padding) کا ذکر کیا گیا ہے):

مثال

.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 پروپرٹی کو سے استعمال کیا تو اس کی اجازت ہوتی ہے کہ آپ عناصر کی کل چوڑائی اور اونچائی میں کافی میٹر (padding) اور فریم (border) شامل کریں。

اگر آپ نے عناصر پر box-sizing: border-box;، تو کوئی اضافی کافی میٹر (padding) اور فریم (border) شامل ہوگا:

اب دونوں 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;
}

آزمایش کنید

ویژگی Box Sizing CSS

ویژگی توضیح
box-sizing روش محاسبه عرض و ارتفاع عناصر تعریف شده: آیا باید پدینگ (padding) و لبه‌ها (border) را شامل شوند یا خیر.