CSS - Display العرض

CSS - العرض والرؤية (Display & Visibility)

🔸 تُستخدم خصائص display و visibility للتحكم في كيفية عرض العناصر أو إخفائها في الصفحة.

✅ خاصية display

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

• display: block – يعرض العنصر كعنصر كتلي (block)، يبدأ في سطر جديد.
• display: inline – يعرض العنصر داخل السطر دون كسر السطر.
• display: inline-block – مثل inline لكنه يسمح بتحديد العرض والارتفاع.
• display: none – يخفي العنصر تمامًا من الصفحة (ولا يشغل مساحة).

.block {
  display: block;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}
.none {
  display: none;
}

🧪 مثال عملي (display)

هذا عنصر block
هذا عنصر inline
هذا عنصر inline-block
هذا العنصر لن يظهر!

✅ خاصية visibility

تتحكم في ما إذا كان العنصر مرئيًا أم لا، مع الحفاظ على المساحة.

• visibility: visible – العنصر مرئي (القيمة الافتراضية).
• visibility: hidden – العنصر غير مرئي، لكنه لا يزال يشغل مساحة في الصفحة.

.visible {
  visibility: visible;
}
.hidden {
  visibility: hidden;
}

🧪 مثال عملي (visibility)

أنا مرئي
لن تراني، لكني ما زلت هنا!

📌 الفرق بين display و visibility

الخاصية	هل يُعرض العنصر؟	هل يشغل مساحة؟
display: none	❌ لا	❌ لا
visibility: hidden	❌ لا	✅ نعم

💡 ملاحظات إضافية

• يمكنك استخدام JavaScript لتغيير خصائص display و visibility أثناء تفاعل المستخدم.
• display: none مفيد في القوائم المنسدلة أو التبديل بين الأقسام.
• يمكن استخدام visibility: hidden إذا كنت تريد إخفاء العنصر مؤقتًا مع الحفاظ على المساحة.