1. Inline Elements (العناصر المضمنة)
التعريف:
- العناصر
inlineتحتل فقط المساحة التي تتطلبها المحتويات بداخلها، ولا تبدأ في سطر جديد. - أمثلة:
<span>,<a>,<img>,<strong>,<em>.
الخصائص:
- لا تبدأ في سطر جديد.
- تأخذ فقط المساحة التي تحتاجها.
- يمكن وضع عدة عناصر
inlineفي نفس السطر.
استخدامات:
- مثالية للنصوص أو الصور الصغيرة داخل النص.
مثال:
<p>This is an <span style="color: red;">inline</span> element.</p>
2. Block Elements (العناصر الكتلية)
التعريف:
العناصر block تبدأ دائمًا في سطر جديد وتحتل العرض الكامل للعنصر الأب.
أمثلة:
<div>, <p>, <h1>, <ul>, <li>.
الخصائص:
- تبدأ في سطر جديد.
- تأخذ العرض الكامل للعنصر الأب.
- يمكن أن تحتوي على عناصر inline وعناصر block أخرى.
استخدامات:
مثالية لتقسيم الصفحة إلى أقسام أو لفقرات النصوص.
مثال:
<div>This is a block element.</div> <p>This is another block element.</p>
3. Inline-block Elements (العناصر المضمنة-الكتلية)
التعريف:
العناصر inline-block تجمع بين خصائص العناصر inline و block.
تأخذ المساحة التي تحتاجها فقط (مثل العناصر inline) لكنها يمكن أن تتضمن عناصر block بداخلها وتُطبق عليها خصائص block.
الخصائص:
- لا تبدأ في سطر جديد.
- تأخذ فقط المساحة التي تحتاجها.
- يمكن تطبيق width و height و margin و padding عليها.
استخدامات:
مثالية عند الحاجة إلى التحكم في الأبعاد والمسافات لعناصر inline.
مثال:
<span style="display: inline-block; width: 100px; height: 50px; background-color: lightblue;">Inline-block element</span>
