شرح block vs inline vs inline-block في CSS — متى تستخدم كل نوع؟

بعد أن فهمت خاصية display، لازم تميّز بدقة بين أشهر أنواع العرض: block وinline وinline-block.

إذا كنت تبحث عن الفرق بين block و inline في CSS أو متى أستخدم inline-block أو لماذا width لا تعمل على span، فهذا الدرس يجيبك مباشرة.

الفرق بين block و inline و inline-block في CSS

display: block في CSS

عناصر block مثل div وp وh1 تبدأ في سطر جديد وتأخذ مساحة أفقية واسعة.

.item {
    display: block;
    width: 180px;
    padding: 8px;
}

ماذا يفعل هذا الكود؟ يجعل كل عنصر في سطر منفصل مع عرض محدد.

النتيجة المتوقعة: العناصر ترتّب عمودياً.

خطأ شائع: توقع ظهور العناصر بجانب بعضها رغم أنها block.

display: inline في CSS

عناصر inline مثل span وa تظهر بجانب بعضها داخل نفس السطر. لكنها لا تتعامل مع width/height مثل block.

.item {
    display: inline;
    width: 180px;   /* غالباً لا يعمل كما تتوقع */
    height: 60px;   /* غالباً لا يعمل كما تتوقع */
}

ماذا يفعل هذا الكود؟ يبقي العناصر داخل السطر، ويتجاهل أبعاداً ثابتة في كثير من الحالات.

النتيجة المتوقعة: سلوك نصّي أكثر من كونه صندوقاً.

خطأ شائع: استخدام inline ثم الاستغراب أن width لا تتطبق.

display: inline-block في CSS (الحل الهجين)

inline-block يجمع أفضل ما في النوعين: يظهر بجانب العناصر مثل inline، ويقبل width/height مثل block.

.card {
    display: inline-block;
    width: 120px;
    height: 90px;
    margin: 6px;
    padding: 8px;
}

ماذا يفعل هذا الكود؟ ينشئ صناديق بجانب بعضها بأبعاد ثابتة.

سطر بسطر:

• inline-block: صف أفقي مع تحكم كامل بالأبعاد.
• width/height: توحيد حجم البطاقات.
• margin/padding: فراغات داخلية وخارجية طبيعية.

النتيجة المتوقعة: ترتيب شبكي بسيط قبل Flexbox.

خطأ شائع: نسيان وجود مسافة HTML بين العناصر قد تخلق فراغاً إضافياً صغيراً.

متى أستخدم block ومتى inline ومتى inline-block؟

• block: للأقسام الكبيرة مثل cards, sections, headers.
• inline: لعناصر النص داخل السطر مثل الروابط والكلمات.
• inline-block: للعناصر الصغيرة المتجاورة مع أبعاد واضحة (أزرار/قوائم بسيطة).

أخطاء شائعة في Display Types in CSS

١) تطبيق width على inline: النتيجة غالباً غير متوقعة.

٢) استخدام block لعناصر تريدها بجانب بعضها: تظهر في أسطر منفصلة.

٣) نسيان المسافات بين inline-block: قد يظهر فراغ بسيط إضافي.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

ما الفرق بين block و inline في CSS؟

block يبدأ سطر جديد ويقبل الأبعاد، inline يبقى داخل السطر ولا يتعامل مع الأبعاد بنفس الطريقة.

متى أستخدم inline-block في CSS؟

عندما تريد عناصر بجانب بعضها مع تحكم في width/height.

لماذا width لا تعمل على span في CSS؟

لأن span inline افتراضياً؛ استخدم display: inline-block أو block.

هل inline-block قديم في CSS؟

ليس قديماً، لكنه أقل استخداماً في التخطيطات المعقدة مقارنة بـ Flexbox وGrid.

كيف أجعل العناصر في نفس السطر وتقبل الأبعاد؟

استخدم display: inline-block أو Flexbox حسب الحالة.