ما هي لغة CSS ؟

عند العمل باستخدام CSS، غالباً ما تواجه ثلاثة أنواع مختلفة من سلوكيات العرض للعناصر: inline و block و inline-block.

تؤثر كل خاصية من هذه الخصائص في كيفية تموضع العناصر وكيفية تفاعلها مع العناصر الأخرى في الصفحة.

في هذا الدرس، سنركز على كيفية عمل الخاصية inline-block وكيف تختلف عن كل من العناصر المضمنة (inline) والعناصر التي تشغل كتلة كاملة (block-level).

تتصرف العناصر ذات المستوى الكتلي (Block-level elements) كحاويات كبيرة أو "كتل" (blocks) تشغل العرض الكامل للحاوية الأب؛ فهي تبدأ دائمًا في سطر جديد، ويمكن تعديل كل من ارتفاعها وعرضها.

تشغل العناصر المضمنة (Inline elements) القدر الذي تحتاجه فقط من المساحة؛ فهي تنساب ضمن المحتوى المحيط بها ولا تنتقل إلى سطر جديد.

تُعد الخاصية inline-block مزيجاً يجمع بين هذين السلوكين؛ فمثلها مثل العناصر من النوع (inline elements)، تظل عناصر inline-block ضمن تدفق النص دون أن تبدأ في سطر جديد.

ومع ذلك، وعلى عكس العناصر المضمنة (inline elements)، يمكنك تعديل عرض وارتفاع العنصر من نوع inline-block تماماً كما تفعل مع عناصر مستوى الكتلة (block-level elements).

باختصار، يكمن الفرق الجوهري بين inline و inline-block في أن العناصر من النوع inline لا يمكن التحكم في أبعادها، بينما تتيح العناصر من النوع inline-block تحكماً كاملاً في الأبعاد مع الحفاظ على تموضعها ضمن السطر نفسه مع المحتوى الآخر.

لنلقِ نظرةً على مثال.

<link rel="stylesheet" href="styles.css">

<div class="container">
 <span class="inline-block-element element1">كتلة مضمنة</span>
 <span class="inline-block-element element2">كتلة مضمنة</span>
</div>
        

.inline-block-element {
 display: inline-block;
 width: 150px;
 height: 100px;
}

.element1 {
 background-color: lightblue;
}

.element2 {
 background-color: lightgreen;
}
        

معاينة:

في المثال أعلاه، لدينا عنصر div يحمل الفئة (class container). وداخل عنصر div هذا، يوجد عنصران من نوع span.

تم ضبط كل عنصر من عناصر span على النمط display: inline-block مع تحديد عرض وارتفاع لكل منها أيضاً.

ستظهر العناصر من النوع (inline-block) جنباً إلى جنب لأنها تسلك سلوك العناصر المضمنة (inline)، ولكنها تتمتع أيضاً بعرض وارتفاع محددين، مما يمنحها خصائص مشابهة لعناصر الكتلة (block).

ولكن، إذا أزلت الخاصية display: inline-block، فلن يتم تطبيق كل من الارتفاع height والعرض width، حتى وإن كنت قد حددتهما بوضوح.

إليك كود CSS المُعدَّل:

<link rel="stylesheet" href="styles.css">

<div class="container">
 <span class="inline-block-element element1">عنصر span</span>
 <span class="inline-block-element element2">عنصر span</span>
</div>
        

.inline-block-element {
 width: 150px;
 height: 100px;
}

.element1 {
 background-color: lightblue;
}

.element2 {
 background-color: lightgreen;
}
        

معاينة:

في هذا الكود، قمنا بإزالة الخاصية display: inline-block; مع الإبقاء على كل شيء آخر كما هو؛ وهنا تعود عناصر span إلى سلوكها الافتراضي كعناصر "ضمن السطر" (inline elements).

ونتيجةً لذلك، يتم تجاهل العرض والارتفاع المحددين، ولا تشغل العناصر سوى المساحة اللازمة لمحتواها.

يُعد فهم آلية عمل inline-block أمراً مفيداً؛ إذ يمكنك استخدامه لإنشاء تخطيطات تتطلب كلاً من المحاذاة والتحكم في الأبعاد ضمن تدفق نصي متصل.