كتلة HTML والعناصر المضمنة
كل عنصر HTML له قيمة عرض افتراضية ، اعتمادًا على نوع العنصر.
هناك نوعان من قيم العرض: كتلة ومضمنة.
عناصر الكتلة
يبدأ عنصر مستوى الكتلة دائمًا في سطر جديد.
يشغل عنصر مستوى الكتلة دائمًا العرض الكامل المتاح (يمتد إلى اليسار واليمين بقدر الإمكان).
يحتوي عنصر مستوى الكتلة على هامش علوي وسفلي ، بينما لا يحتوي العنصر المضمن على هذا الهامش.
مثال
<div>Hello World</div>
فيما يلي عناصر مستوى الكتلة في HTML:
العناصر المضمنة
لا يبدأ العنصر المضمن في سطر جديد.
يأخذ العنصر المضمن عرضًا بقدر الضرورة فقط.
هذا عنصر <span> داخل فقرة.
مثال
<span>Hello World</span>
فيما يلي العناصر المضمنة في HTML:
ملاحظة: لا يمكن أن يحتوي العنصر المضمن على عنصر على مستوى الكتلة!
عنصر <div>
غالبًا ما يستخدم <div>العنصر كحاوية لعناصر HTML الأخرى.
لا يحتوي العنصر على <div>سمات مطلوبة ، ولكنه styleشائع .classid
عند استخدامه مع CSS ، <div>يمكن استخدام العنصر لتصميم كتل المحتوى:
مثال
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
العنصر <span>
العنصر <span>عبارة عن حاوية مضمنة تُستخدم لتمييز جزء من نص أو جزء من مستند.
لا يحتوي العنصر على <span>سمات مطلوبة ، ولكنه styleشائع .classid
عند استخدامه مع CSS ، <span>يمكن استخدام العنصر لتصميم أجزاء من النص:
مثال
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes
and my father has <span style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.</p>
ملخص الفصل
- هناك نوعان من قيم العرض: كتلة ومضمنة
- يبدأ عنصر مستوى الكتلة دائمًا بسطر جديد ويستهلك العرض الكامل المتاح
- لا يبدأ العنصر المضمن في سطر جديد ولا يشغل سوى أكبر قدر ممكن من العرض
- العنصر
<div>عبارة عن مستوى كتلة ويستخدم غالبًا كحاوية لعناصر HTML الأخرى - العنصر
<span>عبارة عن حاوية مضمنة تُستخدم لتمييز جزء من نص أو جزء من مستند
علامات HTML
| Tag | Description |
|---|---|
| <div> | Defines a section in a document (block-level) |
| <span> | Defines a section in a document (inline) |
للحصول على قائمة كاملة بجميع علامات HTML المتاحة ، تفضل بزيارة مرجع علامات HTML الخاص بنا .