CSS Academy · درس

Block مقابل Inline مقابل Inline-Block

افهم الفروق بين سلوكيات العرض block وinline وinline-block.

Block مقابل Inline مقابل Inline-Block درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

خاصية display

تُعدّ خاصية display من أهم خصائص CSS الأساسية. فهي تحدد طريقة مشاركة العنصر في تدفق التخطيط، وما إذا كان ينشئ صندوقًا على مستوى الكتلة، أو صندوقًا مضمنًا، أو نوعًا بينهما.

العناصر على مستوى الكتلة

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

العناصر الافتراضية على مستوى الكتلة: div وp وh1-h6 وsection وarticle.

<div>I'm a block element — full width, centered.</div>

العناصر المضمنة

تنساب العناصر المضمنة داخل النص. وهي لا تبدأ سطرًا جديدًا. ولا يؤثر ضبط width أو height فيها. ويُتجاهل الهامش العلوي والسفلي، بينما تعمل الهوامش والحشوات الأفقية.

العناصر المضمنة الافتراضية: span وa وstrong وem وimg.

<p>This is <span>an inline span</span> inside a paragraph.</p>

العناصر المضمنة على مستوى الكتلة

يُعدّ display: inline-block نمطًا هجينًا. إذ تنساب العناصر ضمن السطر، من دون فرض فاصل أسطر، لكنها تدعم العرض والارتفاع وجميع خصائص نموذج الصندوق مثل عناصر الكتلة.

<a class="btn" href="#">Click Me</a>

استخدام Inline-Block للتنقل

قبل ظهور Flexbox، كان inline-block يُستخدم لإنشاء أشرطة تنقل أفقية. ومن سلبياته أن المسافات البيضاء في مصدر HTML تنشئ فجوات صغيرة بين العناصر.

<ul><li>Home</li><li>About</li><li>Contact</li></ul>

إزالة الفجوة المضمنة

يمكن إزالة فجوة المسافات البيضاء بين عناصر inline-block بضبط font-size: 0 على العنصر الأب وإعادته إلى قيمته في العناصر الأبناء، أو بإزالة المسافات البيضاء من HTML.

<ul><li>One</li><li>Two</li><li>Three</li></ul>

استبدال Inline-Block بـ Flex

في CSS الحديثة، يُعدّ استخدام display: flex على العنصر الأب الطريقة المفضلة لإنشاء تخطيطات أفقية من دون مشكلات المسافات البيضاء. ومع ذلك، يظل inline-block مفيدًا لتحديد حجم عنصر واحد.

تغيير Display

يمكن تغيير نوع display لأي عنصر باستخدام CSS. ويُستخدم ذلك عادةً لجعل الروابط على شكل أزرار أو لجعل عناصر القوائم أفقية.

<a class="button" href="#">Button</a>
<ul><li>Item 1</li><li>Item 2</li></ul>

قيم Display الخاصة بالجداول

توفر CSS قيمًا مثل display: table وdisplay: table-row وdisplay: table-cell وغيرها لتطبيق تخطيط الجداول على عناصر ليست جداول. ونادرًا ما تكون مطلوبة اليوم، لكنها مفيدة للمحاذاة الرأسية في السياقات القديمة.

جذر التدفق: display: flow-root

ينشئ display: flow-root سياق تنسيق للكتلة جديدًا من دون الآثار الجانبية لـ overflow: hidden. فهو يمسح العناصر العائمة ويمنع امتداد انهيار الهوامش خارج الحاوية.

<div class="clearfix">Contains floated children without collapsing.</div>

الصناديق المجهولة

عند خلط عناصر الكتلة والعناصر المضمنة كعناصر شقيقة، يغلّف المتصفح المحتوى المضمن المتبقي في صناديق كتلة مجهولة. وهذا السلوك غير مرئي، لكنه يفسر التحولات غير المتوقعة في التخطيط.

تحقق سريع

ما قيمة display التي تتيح ضبط width مع إبقاء العنصر ضمن التدفق المضمن؟

مراجعة

تأخذ عناصر الكتلة العرض الكامل وتبدأ سطرًا جديدًا. وتنساب العناصر المضمنة مع النص وتتجاهل العرض والارتفاع. أما Inline-block فيجمع بين الاثنين: ينساب ضمن السطر، لكنه يقبل العرض والارتفاع. وتفضّل التخطيطات الحديثة Flexbox وGrid على شبكات inline-block.

الأسئلة الشائعة

هل درس «Block مقابل Inline مقابل Inline-Block» مجاني؟

نعم — نص درس «Block مقابل Inline مقابل Inline-Block» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «Block مقابل Inline مقابل Inline-Block»؟

افهم الفروق بين سلوكيات العرض block وinline وinline-block. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «Block مقابل Inline مقابل Inline-Block»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy