عرض ورؤية CSS

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

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

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

قيم display

block

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

مثال

HTML

<style>
.block {
  display: block;
  width: 200px;
  background: #e3f2fd;
  padding: 10px;
  margin: 5px 0;
}
</style>
<div class="block">عنصر مستوى قطعي 1</div>
<div class="block">عنصر مستوى قطعي 2</div>

▶ جرّب الكود

inline

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

مثال

HTML

<style>
.inline {
  display: inline;
  background: #fce4ec;
  padding: 5px;
}
</style>
<span class="inline">سطري 1</span>
<span class="inline">سطري 2</span>
<span class="inline">سطري 3</span>

▶ جرّب الكود

inline-block

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

مثال

HTML

<style>
.inline-block {
  display: inline-block;
  width: 150px;
  height: 80px;
  background: #e8f5e9;
  margin: 5px;
  text-align: center;
  line-height: 80px;
}
</style>
<div class="inline-block">صندوق 1</div>
<div class="inline-block">صندوق 2</div>
<div class="inline-block">صندوق 3</div>

▶ جرّب الكود

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

visibility: hidden مقابل display: none

مثال

HTML

<style>
.hidden {
  visibility: hidden;
  background: #ffebee;
  padding: 10px;
}
.none {
  display: none;
}
.visible {
  background: #e8f5e9;
  padding: 10px;
}
</style>
<div class="visible">عنصر مرئي</div>
<div class="hidden">مخفي لكن يشغل مساحة</div>
<div class="visible">هذا العنصر يبقى في مكانه</div>

▶ جرّب الكود

opacity

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

مثال

HTML

<style>
.semi-transparent {
  opacity: 0.5;
  background: #2196f3;
  color: white;
  padding: 20px;
}
</style>
<div class="semi-transparent">شفاف 50% (جميع المحتوى متأثر)</div>

▶ جرّب الكود

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

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

❓ أسئلة شائعة

س ما الفرق بين 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، معالجة مشكلة فجوة المسافة البيضاء.