العرض والرؤية (Display)

خاصية display

تحدّد كيف يُعرض العنصر وكيف يتعامل مع العناصر المجاورة. أهم قيمها:

block

يأخذ كامل العرض ويبدأ سطرًا جديدًا. (افتراضي لـ <div>, <p>, <h1>).

span { display: block; }   /* اجعل عنصرًا مضمّنًا يتصرّف ككتلة */

inline

يأخذ عرض محتواه فقط ولا يبدأ سطرًا جديدًا. لا يقبل width/height. (افتراضي لـ <span>, <a>).

li { display: inline; }   /* قائمة أفقية */

inline-block

مزيج: يبقى في نفس السطر لكنه يقبل width وheight والحشو العمودي:

.btn {
  display: inline-block;
  width: 120px;
  padding: 10px;
}

none

يُخفي العنصر تمامًا (يُزال من التخطيط كأنه غير موجود):

.hidden { display: none; }

display: none مقابل visibility: hidden

.gone { display: none; }        /* يختفي ويُغلق مكانه */
.invisible { visibility: hidden; } /* يختفي ويترك فراغًا */

قيم display الحديثة

.container { display: flex; }   /* تخطيط مرن (درس Flexbox) */
.grid { display: grid; }        /* تخطيط شبكي (درس Grid) */

الأخطاء الشائعة

• ❌ محاولة ضبط width على عنصر inline → لا يعمل؛ استخدم inline-block أو block.
• ❌ الخلط بين display: none وvisibility: hidden → الأول يزيل المساحة، الثاني يبقيها.
• ❌ استخدام display: none لإخفاء محتوى مهم عن قارئات الشاشة دون قصد.

خلاصة

display تحدّد سلوك العنصر: block (سطر كامل)، inline (ضمن السطر، بلا أبعاد)، inline-block (ضمن السطر مع أبعاد)، وnone (إخفاء كامل). وتذكّر الفرق بين display: none وvisibility: hidden.