تحديد العرض CSS - عرض وعرض أقصى

استخدام width،max-width و margin: auto;

كما ذكر في الفصل السابق، العناصر الحجرية تشغل دائمًا كامل العرض المتاح (تتمدد إلى اليسار واليمين بأقصى قدر ممكن).

إعداد عرض العنصر الحجري عرض سيمنع ذلك من التمدد إلى حواف وعاءه. ثم، يمكنك تعيين Margin على auto لوضع العنصر في منتصف العرض في وعاءه. سيشغل العنصر العرض المحدد، وسيوزع الباقي من المساحة بين Marginين:

عرض العنصر <div> هو 500px، Margin تم تعيينه على 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;
}

جرب بنفسك