تعرف على عناصر الكتلة Block والعناصر المضمنة inline في CSS

تتضمن HTML نوعين من العناصر هي العناصر المضمنة inline وعناصر الكتلة block وفي مقال اليوم نتعرف على أهم الاختلافات بينها وما هو النوع inline-block الذي يشمل خصائص النوعين مع بعضهما

عناصر الكتلة Block

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

 أمثلة على عناصر البلوك:

<h1> - <h6>: وسم يستخدم لتضمين عناوين بأحجام مختلفة تتراوح من 1 إلى 6.

<div>: وسم حاوية يستخدم لإنشاء أقسام منفصلة للمحتوى على صفحة الويب.

<hr>: وسم يستخدم لفصل المحتوى بخطوط أفقية.

<li>: وسم يستخدم لتضمين عناصر قائمة لقائمة مرتبة أو غير مرتبة.

<ul> : وسم يستخدم لإنشاء قائمة غير مرتبة.

<ol>: وسم يستخدم لعمل قائمة مرتبة.

<p>:وسم يستخدم لتضمين فقرات المحتوى في صفحة الويب.

<table>: وسم يستخدم لتضمين الجداول في صفحة الويب عندما تكون هناك حاجة لبيانات مجدولة.

عناصر بلوك HTML 5 الدلالية (Semantic)

<header>: وسم يستخدم لتضمين جميع الأشياء الرئيسية لصفحة الويب مثل شريط التنقل والشعارات وعنوان صفحة الويب.

<nav>: وسم يستخدم  لعناصر التنقل عبر الأقسام المختلفة من خلال تضمين كتل مختلفة من الارتباطات التشعبية في صفحة الويب.

<footer>: وسم يستخدم  لاحتواء كافة المعلومات في تذييل الموقع مثل معلومات الاتصال، وتفاصيل حقوق النشر لصفحة الويب.

<main>: وسم يستخدم  لاحتواء المحتوى الرئيسي لصفحة الويب في هذه العلامة.

<section>: وسم يستخدم  لتضمين أقسام مختلفة منفصلة في صفحة الويب.

<article>: وسم يستخدم لتضمين مقالات مستقلة مختلفة على صفحة الويب.

<aside>: وسم يستخدم للإشارة إلى المحتوى الجانبي

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

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

أمثلة على العناصر المضمنة:

<a>: وسم يستخدم لتضمين الارتباطات التشعبية في صفحة الويب.

<br>: وسم يستخدم  للإشارة إلى فواصل الأسطر في صفحة الويب حيثما دعت الحاجة.

<script>: وسم يستخدم  لتضمين أكواد JavaScript الخارجية والداخلية.

<input>: وسم يستخدم  لأخذ المدخلات من المستخدمين ويستخدم بشكل أساسي في النماذج.

<img>:وسم يستخدم  لتضمين صور مختلفة في صفحة الويب لإضافة جمال إلى صفحة الويب.

<span>: وسم حاوية مضمنة تشغل المساحة الضرورية فقط.

<b>: وسم نستخدمه في الأماكن التي نحتاج فيها لكتابة نص غامق.

<label>: وسم يستخدم في HTML لتوفير تحسين قابلية الاستخدام لمستخدمي الفأرة، أي إذا نقر المستخدم على النص داخل عنصر <label> فإنه يقوم بتبديل عنصر التحكم.

الفرق بين العناصر المضمنة وعناصر الكتلة:

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

ما معنى inline-block؟

تستخدم الخاصية display: inline لعرض عنصر مضمن بطبيعته مثل <span>

 لا تتأثر خصائص العرض والارتفاع  بالخاصية ;display:inline ويسمح فقط بتحديد الهامش الأيسر والأيمن  وليس الهامش الأعلى والأسفل. أي بمعنى آخر لا يحتوي على فاصل أسطر قبل وبعد العناصر المجاورة ويسمح بوضع عناصر HTML بجانبه.

element {

    display: inline;

    // CSS property

}

خاصية display: inline-block: تُستخدم لعرض عنصر كحاوية كتلة على مستوى مضمّن. العنصر نفسه منسق كعنصر مضمن، لكن يمكنه تطبيق قيم الطول والعرض. أي  يتم وضعه كعنصر مضمن على نفس السطر. 

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

element {

    display: inline-block;

    // CSS property

}