36. خاصية العرض: block, inline, inline-block

خاصية display هي الخاصية الأكثر أساسية التي تؤثر على كيفية تصرف العنصر في تدفق المستند، حيث تحدد سياق تخطيطه وكيفية تفاعله مع نموذج الصندوق (Box Model).

1. العناصر على مستوى الكتلة (display: block)

تشغل عناصر الكتلة العرض الكامل المتاح وتبدأ دائماً في سطر جديد. وهي تحترم جميع خصائص نموذج الصندوق (width, height, padding, margin).

• أمثلة: <div> ، <h1> إلى <h6> ، <p> ، <ul> ، <li>.

css .my-div { display: block; /* الافتراضي للـ divs / width: 50%; / تحترم خاصية العرض / margin: 10px; / تحترم خاصية الهامش */ }

2. العناصر المضمنة (display: inline)

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

• أمثلة: <span> ، <a> ، <strong> ، <em>.
• القيود: العناصر المضمنة لا تحترم width أو height أو margin-top أو margin-bottom.

3. العناصر المضمنة-الكتلة (display: inline-block)

تجمع عناصر inline-block بين سمات كليهما:

• تتدفق جنباً إلى جنب مثل العناصر المضمنة (لا تفرض سطراً جديداً).
• تحترم width و height والحشوة والهامش، تماماً مثل عنصر الكتلة.

css .nav-item { display: inline-block; padding: 10px 15px; margin-right: 5px; /* الهامش يعمل على جميع الجوانب */ }

ملاحظة تاريخية: كان inline-block أداة تخطيط أساسية قبل ظهور Flexbox و Grid، خاصة لقوائم التنقل.