العناصر من نوع Block مقابل Inline

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 54 من 76.

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

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

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

تتضمن أمثلة العناصر على مستوى الكتلة (block-level elements) ما يلي:

<div>
<h1> - <h6>
<p>
<ul>، <ol>، <li>
<form>
<table>
<header>، <footer>، <section>، <article>، <nav>

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

لا يبدأ العنصر المضمن (inline element) في سطر جديد ويأخذ فقط العرض اللازم لاحتواء محتواه. وهو يسمح للعناصر المضمنة بالتدفق داخل سطر من النص أو داخل عنصر على مستوى الكتلة (block-level).

تشمل أمثلة العناصر المضمنة (inline elements) ما يلي:

<span>
<a>
<img>
<strong>، <em>
<input>، <button>، <label>
<textarea>

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على عناصر متنوعة. مهمتك هي تحديد العناصر التي تنتمي لمستوى الكتلة (block-level) والعناصر المضمنة (inline)، ثم تطبيق بعض قواعد CSS الأساسية لإبراز الاختلافات. اتبع الخطوات أدناه:

اكتب قاعدة CSS تستهدف جميع العناصر على مستوى الكتلة (div، p، h1). قم بتعيين background-color لها إلى lightgray وأضف border بقيمة 1px solid blue.
اكتب قاعدة CSS تستهدف جميع العناصر المضمنة (span، a، img). قم بتعيين background-color لها إلى lightyellow وأضف border بقيمة 1px solid red.

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

ورقة مرجعية

تُصنف عناصر HTML إما كعناصر على مستوى الكتلة (block-level) أو عناصر مضمنة (inline) بناءً على سلوك عرضها.

العناصر على مستوى الكتلة (Block-level Elements)

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

أمثلة: <div>، <h1>-<h6>، <p>، <ul>، <ol>، <li>، <form>، <table>، <header>، <footer>، <section>، <article>، <nav>

العناصر المضمنة (Inline Elements)

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

أمثلة: <span>، <a>، <img>، <strong>، <em>، <input>، <button>، <label>، <textarea>

جرّب بنفسك

<html>
<head>
    <title>Block vs Inline Elements</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a div element.</div>
    <p>This is a paragraph with a <span>span element</span> inside.</p>
    <h1>This is a heading element.</h1>
    <a href="#">This is a link</a>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image" width="100">
</body>
</html>