شرح صفوف ومحتوى الفقرة
تعمل العناصر السطرية Inline-level داخل النسيج الطبيعي للفقرات والنصوص، حيث تقوم بتنسيق أو تعديل عبارات وكلمات محددة دون الإخلال بترابط الفقرة أو كسر سطرها. ومن أشهر الأمثلة عليها عنصر التغليف السطري
<span> والروابط <a> ونصوص التأكيد <strong> و <em> ورموز الأكواد <code>.يلخص الجدول المقارن التالي الفروق الهندسية والوظيفية الجوهرية بين العناصر الكتلية والعناصر السطرية في لغة HTML:
| معيار المقارنة | العناصر الكتلية (Block) | العناصر السطرية (Inline) | أمثلة شائعة |
|---|---|---|---|
| التدفق داخل السطر | تبدأ دائماً في سطر مستقل جديد | تنساب طبيعياً داخل نفس السطر النصي | كتلي: <div> و <p> / سطري: <span> و <a> |
| العرض الافتراضي | تتمدد لتشغل كامل عرض الحاوية الأب (100%) | تأخذ عرض محتواها النصي الداخلي فقط | كتلي: <h1>..<h6> / سطري: <strong> |
| تحديد العرض والارتفاع | تستجيب كلياً لخصائص width و height | يتجاهل المتصفح تعديل عرضها وارتفاعها المباشر | كتلي: <ul> و <ol> / سطري: <code> |
| الهوامش العمودية | تُطبَّق بالكامل أعلى العنصر وأسفله | لا تدفع الأسطر المجاورة عمودياً | كتلي: <blockquote> / سطري: <sub> و <sup> |
| الوظيفة المعمارية | تقسيم هيكل الصفحة والأقسام الكبرى | تمييز الكلمات والعبارات والروابط وسط الجمل | كتلي: <table> و <form> / سطري: <em> |
HTML
<p>
Learn modern <a href="/tutorials/html">HTML</a>
with <strong>practical</strong> exercises and
<code>npm test</code> command checks.
</p>من القواعد الهندسية الجوهرية في نموذج العرض السطري أن محرك المتصفح يتجاهل تماماً قيم العرض والارتفاع المحددة لعناصر السطور عبر CSS. وعلاوة على ذلك، فبينما تعمل الهوامش الأفقية يميناً ويساراً بشكل طبيعي لدفع الكلمات المجاورة، فإن الهوامش الخارجية الرأسية العلوية والسفلية ليس لها أي تأثير على تباعد السطور.