شرح display في CSS — ما الفرق بين block و inline و none؟

خاصية display في CSS من أهم الخصائص في بناء Layout. هي التي تحدد كيف يتصرف العنصر: هل يأخذ سطراً كاملاً؟ هل يظهر بجانب عناصر أخرى؟ هل يختفي تماماً؟

إذا كنت تبحث عن شرح display في CSS أو الفرق بين block و inline أو display none vs visibility hidden، فهذا الدرس يشرحها خطوة بخطوة.

ما هي خاصية display في CSS؟

كل عنصر HTML له سلوك افتراضي في العرض. خاصية display تسمح لك بتغيير هذا السلوك.

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

القيم الأساسية لـ display in CSS

1) display: block

العنصر يأخذ عرض السطر بالكامل ويبدأ في سطر جديد. مثل: div وp وh1.

.item {
    display: block;
}

النتيجة المتوقعة: كل عنصر يظهر في سطر منفصل.

2) display: inline

العنصر يأخذ فقط مساحة محتواه ويظهر بجانب العناصر الأخرى. مثل: span وa.

.item {
    display: inline;
}

النتيجة المتوقعة: العناصر تظهر على نفس السطر طالما المساحة متاحة.

3) display: none

يخفي العنصر تماماً ويزيله من تخطيط الصفحة (لا يترك أي فراغ).

.hidden {
    display: none;
}

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

الفرق بين display: none و visibility: hidden في CSS

.a { display: none; }
.b { visibility: hidden; }

ماذا يفعل هذا الكود؟ الأول يحذف العنصر من flow، والثاني يخفيه مع إبقاء المساحة.

خطأ شائع: استخدام visibility:hidden عند الحاجة لإزالة العنصر من التخطيط بالكامل.

تغيير السلوك الافتراضي للعنصر في CSS

يمكنك تحويل عنصر inline إلى block للاستفادة من العرض والارتفاع وpadding بسهولة.

a.menu-link {
    display: block;
    width: 220px;
    background: #e2e8f0;
    padding: 10px;
}

ماذا يفعل هذا الكود؟ يحول الرابط إلى صندوق كامل يمكن تنسيقه كبطاقة.

النتيجة المتوقعة: الرابط يصبح أسهل للنقر وأوضح بصرياً.

خطأ شائع: توقع أن width تعمل على عنصر inline بدون تغيير display.

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

١) استخدام inline مع width/height: غالباً لا يعمل كما تتوقع.

٢) إخفاء عنصر مهم بـ display:none: قد يؤثر على تجربة المستخدم/التفاعل.

٣) خلط block وinline بدون فهم: يسبب ترتيباً فوضوياً للعناصر.

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

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

block يأخذ السطر كاملاً، inline يأخذ مساحة المحتوى فقط.

كيف أخفي عنصر في CSS؟

استخدم display: none; إذا أردت إزالته من التخطيط.

ما الفرق بين display:none و visibility:hidden؟

display:none يزيل العنصر ومساحته، visibility:hidden يخفي العنصر ويترك مكانه.

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

لأن span inline افتراضياً. غيّرها إلى display: inline-block أو block.

هل display تؤثر على ترتيب العناصر في الصفحة؟

نعم، بشكل مباشر، لأنها تحدد طريقة سلوك العنصر ضمن تدفق الصفحة.