CSS: عرض ورؤية CSS

آخر تحديث: 2026-10-13

خاصية display هي واحدة من أهم خصائص CSS، تتحكم في كيفية عرض العناصر وتخطيطها على الصفحة.

مرجع سريع لخاصية display

القيمة	السلوك	العرض/الارتفاع	العناصر النموذجية
`block`	سطر جديد، عرض كامل	يقبل	`div`، `p`، `h1-h6`
`inline`	نفس السطر، عرض المحتوى	يتجاهل	`span`، `a`، `em`
`inline-block`	نفس السطر، يقبل الأبعاد	يقبل	`button`، `input`
`flex`	حاوية فليكس	—	حاويات تخطيط
`grid`	حاوية شبكة	—	حاويات تخطيط
`none`	مخفي تماماً	—	أي عنصر

خصائص هذا القسم: display flex grid

1. قيم display

(1) block

عناصر المستوى القطعي تشغّل سطراً كاملاً، تتكدس عمودياً:

▶ مثال

▶ جرّب الكود

(2) inline

عناصر سطرية تبقى على نفس السطر، تشغّل فقط عرض المحتوى:

▶ مثال

▶ جرّب الكود

(3) inline-block

يجمع بين موضع سطري وأبعاد مستوى قطعي:

▶ مثال

▶ جرّب الكود

2. الرؤية و الشفافية

(1) visibility: hidden مقابل display: none

▶ مثال

▶ جرّب الكود

(2) opacity

يتحكم في شفافية العنصر (0-1)، مؤثراً على جميع المحتوى بما في ذلك الأبناء:

▶ مثال

▶ جرّب الكود

3. مقارنة طرق إخفاء العناصر

الطريقة	يشغل مساحة	مرئي	تفاعلي	رسوم متحركة
`display: none`	❌	❌	❌	❌
`visibility: hidden`	✅	❌	❌	✅
`opacity: 0`	✅	✅	✅	✅
`position: absolute; left: -9999px`	❌	❌	✅	❌

خصائص هذا القسم: display flex grid

❓ أسئلة شائعة

س ما الفرق بين display: none وvisibility: hidden؟

ج display: none يُزيل العنصر تماماً — لا مساحة مشغولة، العناصر المحيطة تملأ الفراغ. visibility: hidden يُخفي المرئي فقط — العنصر لا يزال يشغل مساحة. لرسوم الانتقال، opacity: 0 مع transition أكثر سلاسة.

س كيف أزيل الفجوات بين عناصر inline-block؟

ج فجوة 4px بين عناصر inline-block تأتي من مسافات HTML البيضاء (كسور الأسطر والمسافات). الحلول: اضبط font-size: 0 على الأصل ثم أعد تعيينه على الأبناء، أو اكتب العلامات على نفس السطر without كسور.

س opacity: 0 مقابل visibility: hidden — أيهما أداء أفضل؟

ج عناصر opacity: 0 لا تزال يمكنها تشغيل أحداث النقر، visibility: hidden لا تستطيع. الأداء متشابه، لكن opacity يدعم رسوم الانتقال لإظهار/إخفاء سلس، visibility لا يمكنها الانتقال.

📖 ملخص

display هيخاصية التخطيط الجوهرية
فهم اختلافات block وinline وinline-block يساعد على التحكم في ترتيب العناصر
display: none وvisibility: hidden كلاهما يُخفيان العناصر، لكن أحدهما يشغل مساحة والآخر لا — حالات استخدام مختلفة
في التخطيطات الحديثة، display: flex وdisplay: grid هما أدوات التخطيط الأقوى

📝 تمارين

أنشئ صفحة بصناديق block وinline وinline-block لمراقبة اختلافات الترتيب والحجم.
اضبط روابط التنقل على inline-block بعرض وارتفاع وحشو لإنشاء شريط تنقل أفقي.
وضح الفرق بين display: none وvisibility: hidden.
أنشئ "مجموعة أزرار" باستخدام display: inline-block، معالجة مشكلة فجوة المسافة البيضاء.

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن