3.0 KiB
| title | localeTitle |
|---|---|
| Block and Inline Elements | كتلة وعناصر مضمن |
كتلة وعناصر مضمن
دعنا نفهمهم باستخدام الأمثلة أدناه:
نموذج الكود مع الإخراج:
عنصر مستوى الكتلة:
يشغل عنصر Block-level المساحة الكاملة لـ parent (حاوية) مثل <div> و <p> في المثال.
لاحظ أن كلا من <div> و <p> يبدأان من سطر جديد في كل مرة ، لتشكيل هيكل يشبه كتلة . تبدأ عناصر مستوى الكتلة على أسطر جديدة.
العناصر الشائعة على مستوى الكتلة هي <div> ، <p> ، <article> ، <section> ، <figure> ، <footer> إلخ.
عنصر مضمن:
مضمنة كما يقول الاسم "مضمن كجزء من النص الرئيسي وليس كقسم منفصل". تحتل العناصر المضمنة المساحة حسب الحاجة داخل المساحة المحددة بواسطة العنصر الرئيسي. على عكس العناصر على مستوى الكتلة ، فإنها لا تبدأ في خطوط جديدة.
بعض العناصر المضمنة هي <a> ، <span> ، <img> ، <code> ، <cite> ، <button> ، <input> إلخ.
نموذج الكود مع الإخراج:
ملاحظة : قد تحتوي عناصر مستوى الحظر على عناصر أخرى على مستوى الكتلة أو عناصر مضمّنة. لا يمكن أن تحتوي العناصر المضمّنة على عناصر مستوى الكتلة.
التغييرات في HTML5
على الرغم من أن فهم العناصر المحجوزة والعناصر المضمنة لا يزال مناسبًا ، يجب أن تكون على دراية بأن هذه المصطلحات قد تم تعريفها في إصدارات سابقة من مواصفات HTML. في HTML5 ، تحل مجموعة أكثر تعقيدًا من "فئات المحتوى" محل عناصر مستوى التجميع والمضمنة. يتم وضع عناصر مستوى الحظر بشكل كبير في فئة "محتوى التدفق" في HTML5 ، بينما تتطابق العناصر المضمنة مع الفئة "محتوى الصياغة". لمزيد من المعلومات حول فئات المحتوى الجديدة في HTML5 ، بما في ذلك محتوى التدفق ومحتوى الصياغة ، راجع صفحة فئات المحتوى على شبكة مطوري برامج Mozilla.
معلومات اكثر:
يرجى مراجعة Mozilla Docs