طراحی CSS - عرض و max-width

width،max-width اور margin: auto; استعمال کریں

پچھلے فصل میں کہا گیا ہے، بلاک کی عناصر تمام کی اپنی اپنی چوڑائی کا استعمال کرتے ہیں (اس کی ممکنہ حد تک چپ اور دائیں طرف تک بڑھتے رہتے ہیں).

بلاک کی عناصر کا چوڑائی اس کا روک کرنا ہوگا کہ وہ اپنے کنٹینر کی حصے کی سرحد تک پھیلی جائے۔ بعد میں آپ اپنے کنٹینر میں عناصر کو افقی طور پر مرکز میں رکھنے کے لئے بیرونی ماگین auto set کرسکتے ہیں۔ عناصر کی چوڑائی مقرر کردی جائے گی، بقیہ خالی علاقہ دو بیرونی ماگینوں کے درمیان مساوی طور پر تقسیم ہوگا:

یہ <div> عناصر کی چوڑائی 500px ہے، بیرونی ماگین set کیا گیا ہے auto.

توجہ:جب کہ بروزر کا ونڈو کم سائز کا ہو تو، اس کے اپر <div> مشکلی ایجاد خواهد شد. مرورگر یک نوار اسکرول افقی به صفحه اضافه خواهد کرد.

در این حالت، استفاده از max-width این می‌تواند عملکرد مرورگر در پنجره‌های کوچک‌تر را بهبود بخشد. این نکته برای اطمینان از قابل استفاده بودن وب‌سایت در دستگاه‌های کوچک بسیار مهم است:

این عناصر <div> بیشترین عرض 500px دارند و حاشیه تنظیم شده به صورت auto است.

توضیح:لطفاً اندازه پنجره مرورگر را به کمتر از 500 پیکسل تنظیم کنید تا تفاوت بین دو div را مشاهده کنید!

این مثال دو div بالا است:

مثال

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}
div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

آزمایش کنید