العرض والإخفاء (Display) — تصميم CSS

العرض والإخفاء: display و overflow

block مقابل inline

| | block | inline | inline-block |

|---|---|---|---|

| يبدأ سطراً جديداً | ✅ | ❌ | ❌ |

| العرض الافتراضي | كامل عرض الأب | بقدر المحتوى | بقدر المحتوى |

| يقبل width و height | ✅ | ❌ | ✅ |

| الحشو والهامش الرأسيان | ✅ | لا يدفعان الأسطر الأخرى | ✅ |

| أمثلة افتراضية | div، p، h1، ul، section | span، a، strong، img* | — |

a.btn {
    display: inline-block;   /* رابط يقبل حشواً وأبعاداً ويبقى في السطر */
    padding: 10px 20px;
}

display يغيّر الشكل فقط؛ <span style="display:block"> يبقى span في المعنى. لا تختر عنصر HTML حسب شكله الافتراضي.

قيم أخرى ستتعلمها: flex و grid (دروس التخطيط) — وهما الطريقة الحديثة لترتيب العناصر بدل inline-block.

الإخفاء: أربع طرق مختلفة

| الطريقة | يأخذ مساحة؟ | يراه قارئ الشاشة؟ | يُنقر؟ |

|---|---|---|---|

| display: none | ❌ | ❌ | ❌ |

| visibility: hidden | ✅ | ❌ | ❌ |

| opacity: 0 | ✅ | ✅ | ✅ (احذر!) |

| صنف "مخفي بصرياً" | ❌ | ✅ | — |

الأخير لنص يحتاجه مستخدمو قارئات الشاشة فقط (مثل عنوان لزر أيقونة):

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

وفي HTML الخاصية hidden (<div hidden>) تعادل display: none.

overflow: المحتوى الأكبر من صندوقه

.box { height: 120px; overflow: auto; }      /* شريط تمرير عند الحاجة فقط */
.clip { overflow: hidden; }                  /* قص ما يزيد */
.table-wrap { overflow-x: auto; }            /* تمرير أفقي لجدول عريض على الجوال */

| القيمة | السلوك |

|---|---|

| visible | الافتراضي: يفيض المحتوى خارج الصندوق |

| hidden | يُقص (قد يخفي محتوى مهماً — بحذر) |

| scroll | شريط تمرير دائماً |

| auto | شريط تمرير عند الحاجة — الأكثر استخداماً |

مشكلة شائعة: تمرير أفقي للصفحة كلها

إن ظهر شريط تمرير أفقي على الجوال، فهناك عنصر أعرض من الشاشة (صورة بلا max-width، عنصر width ثابت كبير، كلمة/رابط طويل). ابحث عنه في أدوات المطور بدل إخفاء المشكلة بـ overflow-x: hidden على body. للروابط الطويلة: overflow-wrap: anywhere;.

تمرين

حوّل روابط قائمة التنقل في صفحتك إلى أزرار inline-block بحشو، وضع جدول الدراسة داخل غلاف overflow-x: auto، وأضف زر أيقونة ✕ فيه نص مخفي بصرياً "إغلاق".

/* Block - كل واحد في سطر */
.block-element {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

/* Inline - بجانب بعض */
.inline-element {
    display: inline;
    /* لا يمكن تحديد width/height */
}

/* Inline-block - الأفضل للأزرار */
.button {
    display: inline-block;
    padding: 10px 20px;
    width: auto;
    margin: 5px;
}

/* إخفاء العنصر */
.hidden {
    display: none;
}

.invisible {
    visibility: hidden;
    /* يحتفظ بمساحته */
}

/* تحويل القائمة لأفقية */
nav ul li {
    display: inline-block;
    margin: 0 10px;
}

/* مثال على القائمة */
.horizontal-menu li {
    display: inline-block;
    list-style: none;
}

.horizontal-menu a {
    display: block;
    padding: 15px 25px;
    text-decoration: none;
}