📚 فهم الفرق الأساسي: Block vs. Inline في HTML

اليوم سنغوص في واحد من أهم المفاهيم التي تُشكّل أساس تخطيط أي صفحة ويب: عناصر Block والعناصر Inline. فهم هذا الفرق هو مفتاح التحكم في شكل وتنسيق موقعك الإلكتروني.

لفهم الفكرة ببساطة، تخيل أنك تريد ترتيب بعض الصناديق في غرفة:

  • عناصر Block تشبه الخزانات الكبيرة. كل خزانة تأخذ العرض الكامل للغرفة (أو المساحة المتاحة لها) وتُرتَّب واحدة تلو الأخرى من الأعلى إلى الأسفل.
  • عناصر Inline تشبه الكتب على رف. يمكن للعديد من الكتب أن تجلس بجوار بعضها البعض على نفس الرف (نفس السطر).

🔷 ما هي عناصر Block (عناصر الكتلة)؟

عناصر Block هي عناصر HTML تبدأ دائمًا بسطر جديد وتأخذ العرض الكامل المتاح لها، حتى لو كان المحتوى بداخلها صغيراً.

خصائص عناصر Block:

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

أمثلة شائعة على عناصر Block: <div>, <p>, <h1> إلى <h6>, <ul>, <ol>, <li>, <section>, <article>.

💡 مثال عملي على عناصر Block

لنرى كيف تتصرف عناصر Block عملياً:

<!DOCTYPE html>
<html>
<head>
    <title>مثال Block</title>
    <style>
        .box {
            background-color: lightblue;
            margin: 10px; /* هامش حول الصندوق */
            padding: 20px; /* مسافة بين المحتوى وحافة الصندوق */
        }
    </style>
</head>
<body>
    <div class="box">هذا هو الصندوق الأول (div).</div>
    <p class="box">هذه فقرة (p) تأتي في سطر جديد.</p>
    <h1 class="box">هذا عنوان رئيسي (h1) في سطره الخاص.</h1>
</body>
</html>

💬 شرح المثال:

في هذا الكود، حتى لو كان نص كل عنصر قصيراً، فإن كل عنصر (<div>, <p>, <h1>) سَيَظهَر في سطر منفصل ويُمطّ ليأخذ العرض الكامل للنافذة. الخلفية الزرقاء الفاتحة ستساعدك على رؤية المساحة التي يشغلها كل عنصر بوضوح.

🔶 ما هي عناصر Inline (العناصر المضمنة في السطر)؟

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

خصائص عناصر Inline:

  • ✅ لا تبدأ بسطر جديد؛ تظهر على نفس السطر مع النص أو العناصر الأخرى.
  • ✅ تأخذ فقط المساحة الضرورية لعرض محتواها.
  • ❌ لا يمكنك تحديد العرض (width) أو الارتفاع (height) لها مباشرة باستخدام CSS.
  • ✅ هوامش (margin) وحشوات (padding) العلوية والسفلية لا تؤثر على العناصر المجاورة لها بنفس الطريقة التي تؤثر بها في عناصر Block.

أمثلة شائعة على عناصر Inline: <span>, <a>, <strong>, <em>, <img>, <br>.

💡 مثال عملي على عناصر Inline

لنطبق المثال السابق ولكن باستخدام عناصر Inline:

<!DOCTYPE html>
<html>
<head>
    <title>مثال Inline</title>
    <style>
        .highlight {
            background-color: yellow;
            padding: 5px; /* لاحظ أن هذه الحشوة لا تدفع السطور الأخرى */
        }
    </style>
</head>
<body>
    <p>هذه جملة تحتوي على <strong class="highlight">كلمة مهمة</strong> وعنصر <a href="#">رابط</a> و <em>نص مائل</em>. كلها تظهر على <span class="highlight">نفس السطر</span>.</p>
</body>
</html>

💬 شرح المثال: هنا، جميع العناصر (<strong>, <a>, <em>, <span>) تظهر مُضمنة داخل تدفق النص للفقرة (<p>). لاحظ كيف أن الخلفية الصفراء للعنصر <span> لا تجبر النص الذي يليه على الانتقال لسطر جديد، بل تستمر الجملة بشكل طبيعي.

🔁 مقارنة سريعة: Block مقابل Inline

السمة عناصر Block 🧱 عناصر Inline 📏
بداية السطر تبدأ بسطر جديد تظهر على نفس السطر
المساحة تأخذ العرض الكامل تأخذ المساحة اللازمة فقط
التحكم في الأبعاد نعم (width/height) لا
مثال <div>, <p>, <h1> <span>, <a>, <strong>

🛠️ العنصر <div> والعنصر <span>: الأبطال المجهولة

  • <div> (قسم/Division): هو العنصر الأكثر استخداماً من نوع Block. يُستخدم لتجميع عناصر أخرى وتطبيق أنماط CSS عليها كمجموعة، أو لإنشاء هيكل (Layout) للصفحة. هو مثل "حاوية" أو "صندوق" عام.
  • <span>: هو العنصر الأكثر استخداماً من نوع Inline. يُستخدم لتطبيق أنماط على جزء محدد من النص داخل سطر. هو مثل "علامة تمييز" داخل الجملة.

💡 مثال على استخدام <div> و <span> معاً

<div style="border: 2px solid black; padding: 15px;">
    <h2>عنوان المقال</h2>
    <p>هذه فقرة من النص. فيها كلمة <span style="color: red;">مميزة</span> نريد إبرازها. العنصر div يحيط بالمقال ككل، بينما span يحيط فقط بالكلمة المميزة داخل السطر.</p>
</div>