width / height

خاصيتا الأبعاد width / height

width وheight تحددان أبعاد العنصر — والاحتراف في معرفة متى تتركهما للمحتوى ومتى تقيدهما بـ max وmin.

أبسط خاصيتين وأكثرهما إساءة استخدام. الويب المتجاوب مبني على قاعدة: **قيّد ولا تجمّد** — العرض الثابت بالبكسل ينكسر حتمًا على شاشة ما؛ البدائل الذكية: نسب مئوية من الأب، ووحدات الشاشة (100vw/100vh ومعها dvh الأحدث لجوال بلا مفاجآت الشريط السفلي)، وأهمها ثنائي max-width للنصوص وmin-width للأزرار.

والارتفاع أخطر: تثبيته يقص المحتوى العربي الأطول من توقعك — اتركه للمحتوى غالبًا، أو min-height إن أردت حدًا أدنى.

الصياغة

.hero {
  width: 100%;
  max-width: 640px;   /* قيّد ولا تجمّد */
  min-height: 200px;  /* حد أدنى لا قفص */
}

⚡ جرّب بنفسك

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

🎨 محرّر HTML/CSS

<style>
  .bar { background: #7c5cff; color: white; padding: 10px; border-radius: 8px; margin-bottom: 8px; }
  .fixed { width: 420px; }
  .fluid { width: 100%; max-width: 420px; }
</style>
<div class="bar fixed">width: 420px — ضيّق المعاينة وسأكسر التخطيط</div>
<div class="bar fluid">max-width: 420px — أنكمش بأدب مع الشاشة</div>

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

أهم القيم

القيمة	الوظيفة
100%	ملء عرض الأب — نقطة انطلاق المتجاوب
max-width / min-width	القيد المرن — أهم من width نفسها عمليًا
100vw / 100dvh	أبعاد الشاشة — dvh تتفادى مفاجأة شريط الجوال
fit-content	بحجم المحتوى فقط — أزرار وشارات لا تتمدد

💡 نصائح عملية

لكل صورة: max-width:100% + height:auto — تأمين التجاوب الأشهر
ارتفاع الشاشة الكاملة على الجوال: min-height:100dvh لا 100vh

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

عرض بكسل ثابت لعناصر المحتوى — قنبلة الجوال الموقوتة
height ثابت على صناديق نصية — النص الأطول سيفيض أو يُقص

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

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