max-width

خاصية الحد الأقصى للعرض max-width

خاصية max-width تمنع العنصر من تجاوز عرض معين مع بقائه مرنًا تحته — العمود الفقري لكل تخطيط متجاوب ومقروء.

أهم خاصية «متجاوبة» مفردة: العنصر يتمدد بحرية حتى سقفك ثم يتوقف. عليها يقوم نمط الحاوية الذي يحمل كل موقع حديث (وهذا الموقع): max-width + margin-inline: auto = محتوى متوسط لا يتمدد بسخافة على الشاشات العريضة ولا يكسر الضيقة.

ولسبب قرائي بحت: سطر النص المريح 60-75 حرفًا — وحدة ch تقيسها مباشرة: max-width: 70ch على فقرات المقالات (وصفة عمود القراءة بهذا الموقع حرفيًا).

الصياغة

.container {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 16px;
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .container { max-width: 340px; margin-inline: auto; background: #ede9fe; padding: 14px; border-radius: 12px; }
</style>
<div class="container">
  هذه «حاوية»: عرضها الأقصى 340px وتتوسط ما زاد — وسّع وضيّق المعاينة لترى النمط الذي يحمل كل المواقع الحديثة.
</div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
1100px – 1300px	نطاق حاويات المواقع المألوف
70ch	سقف قرائي بعدد الأحرف — لأعمدة النصوص
100%	على الصور: لا تتجاوزي أباك مهما كبر ملفك
none	إلغاء سقف موروث

💡 نصائح عملية

احفظ ثلاثي الحاوية: max-width + margin-inline:auto + padding-inline — هيكل كل صفحة
70ch للفقرات = راحة عين مثبتة علميًا لا ذوقًا

⚠️ أخطاء شائعة

width ثابت حيث يكفي max-width — خسارة المرونة مجانًا
ترك النصوص تتمدد بعرض شاشة 4K — أسطر لا تُقرأ

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs