جاري التحميل...

خاصية display في CSS

تجيب display عن سؤال هادئ: كيف ينضم هذا الصندوق إلى الصفحة؟ بعضها يتكدس ككتل بعرض كامل؛ وبعضها يجلس داخل جملة؛ وبعضها يُخفى من التخطيط تماماً. هذا الدرس يرسم القيم اليومية — ويترك تمرين inline-block العميق للجلسة التالية.

مجموعة أدوات display

📊 display بنظرة واحدة

القيمة الدور اليومي
block يبدأ في سطره؛ غالباً يملأ عرض الصف
inline يعيش في سطر النص؛ عادةً يُتجاهل width/height
inline-block يجلس في سطر كالنص، لكن يقبل width/height/padding كصندوق
none يزيل العنصر من التخطيط (ينهار الفراغ)
flex / grid أوضاع تخطيط قوية — دروس لاحقة، لا هنا

HTML الافتراضي يختار display لكثير من الوسوم (div كتلة، span مضمن، button غالباً شبه inline-block). CSS يسمح بتجاوز ذلك حين يحتاج التدفق عملاً مختلفاً.

Block — سطره وصندوق فسيح

صناديق block تبدأ في سطر جديد وغالباً تأخذ العرض المتاح. العناوين والفقرات وdiv تتصرف هكذا افتراضياً.

فرض block

css
CSS Code 
.badge {
display: block;
width: 12rem;
padding: 0.5rem 0.75rem;
background: #e8f0ff;
}

Inline — داخل الجملة

صناديق inline تجلس في تدفق النص وتلتف مع الكلمات. ضبط width أو height على عنصر inline خالص غالباً لا يفيد — لذلك يلجأ الناس إلى block أو inline-block.

فرض inline

css
CSS Code 
.note-label {
display: inline;
color: #0b5fff;
font-weight: 600;
}

Inline-block — معاينة قصيرة

يبقي inline-block الجيران في سطر واحد حين يتسع المكان، ويحترم مع ذلك width وheight وpadding. ستتمرن عليه بدقة في الدرس التالي؛ هنا فقط تعرّف الهجين.

لمحة inline-block

css
CSS Code 
.chip {
display: inline-block;
padding: 0.35rem 0.7rem;
border: 1px solid #c5c5c5;
border-radius: 999px;
}

None — اخرج من التخطيط

يخفي display: none العنصر ويطوي فراغه. التخطيط وكثير من أدوات المساعدة يعاملانه كغائب. فضّل تبديل صنف على قواعد مبعثرة.

إخفاء بـ none

css
CSS Code 
.is-hidden {
display: none;
}

visibility: hidden قصة أخرى — قد يحتفظ الصندوق بمساحة. هذا الدرس يبقى مع display: none للإزالة الحقيقية من التخطيط. لن نخوض في visibility هنا.

عادة display هادئة

غيّر display لأسباب التدفق — لا لتجميل الأزرار (الدرس السابق) ولا كاختصار لكل مشكلة تخطيط (flex/grid لاحقاً). سمِّ الحالات المقصودة بأصناف.

أصناف إظهار وإخفاء

css
CSS Code 
.panel {
display: block;
padding: 1rem;
border: 1px solid #ddd;
}

.panel.is-hidden {
display: none;
}

مقارنة ثلاثة أوضاع

css
CSS Code 
.demo-block { display: block; background: #e8f0ff; margin: 0.25rem 0; }
.demo-inline { display: inline; background: #fff3cd; }
.demo-ib { display: inline-block; width: 6rem; background: #d8f5e7; }

جرّب بنفسك

  1. افرض على span أن يكون display: block وأعطه width وpadding.
  2. افرض على div قصير (أو عنوان) display: inline وراقبه داخل جملة.
  3. أضف .chip بـ inline-block — لاحظ أن width/padding يعملان.
  4. أخفِ لوحة بـ .is-hidden { display: none; } وبدّل الصنف.
  5. اكتب جملة: متى تختار block ومتى inline لتسمية؟

أخطاء شائعة

  • توقع أن يعمل width / height على inline خالص
  • استخدام display: none حين أردت فقط تخفيف المظهر — ونسيان انهيار الفراغ
  • معاملة هذا الدرس كجلود hover للأزرار (ذلك كان Buttons)
  • إغراق Flexbox/Grid هنا بدل تعلم القيم الأربع الأساسية
  • الخلط بين «مخفي من التخطيط» ودرس inline-block الأعمق التالي

خلاصة

  • display يتحكم كيف ينضم الصندوق لتدفق الصفحة
  • block يأخذ سطره؛ inline يعيش في النص
  • inline-block هو الهجين — يُتمرَّن لاحقاً
  • none يزيل العنصر وفراغه من التخطيط
  • غيّر display لمهام التدفق؛ اترك التخطيطات المتقدمة لدروس لاحقة

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
7
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 35 من 35
Css درس تعليمي