در حال بارگذاری...

بلوک و اینلاین در HTML

جدول‌ها نشان دادند سلول‌ها چگونه شبکه می‌سازند. حالا به کل صفحه نگاه کنید: هر عنصر یک عادت پیش‌فرض display در جریان عادی دارد. مبتدی‌ها دو خانواده می‌بینند — block و inline. جعبهٔ block معمولاً خط جدید و عرض موجود؛ قطعهٔ inline داخل جمله. تگ معنا (p, a, strong) همچنان مهم است؛ این جلسه دربارهٔ نشستن کنار هم قبل از استایل CSS است.

«جریان» اینجا یعنی چه

جریان ترتیب بسته شدن پیش‌فرض مرورگر است وقتی هنوز layout CSS ننوشته‌اید. پاراگراف block است: خواهر بعدی زیر آن شروع می‌شود. لینک inline است: در همان جمله ادامه می‌یابد. heading، list، div و table پیش‌فرض مثل جعبهٔ block‌اند. strong، em، span و a مثل قطعهٔ inline. img در مستند مبتدی اغلب inline-level توصیف می‌شود هرچند مدل جعبهٔ خاص دارد — تا CSS عمیق‌تر، «داخل خط» کافی است.

پاسخ مستقیم

عناصر block-level معمولاً خط جدید و عرض موجود (p, div, h1–h6, ul, ol, section, table). عناصر inline داخل خط متن (a, strong, em, span, code). بعداً با CSS display عادت را عوض می‌کنید، اما اول پیش‌فرض را حفظ کنید. تگ را اول برای معنا انتخاب کنید؛ دانش display کمک می‌کند پشته در برابر تودرتوی داخل‌خط را پیش‌بینی کنید.

📊 Common defaults

Category	Examples	Flow habit
Block	p, div, h1–h6, ul, ol, section, table	New line, full available width (typical)
Inline	a, strong, em, span, code	Continues inside the text line

جعبهٔ block با قطعهٔ inline داخل

پاراگراف ظرف block است. داخلش لینک و تأکید inline می‌مانند تا جمله یک خط خوانده شود. div بعدی جعبهٔ block تازه زیر آن باز می‌کند. این ترکیب — بیرون block، داخل inline — رایج‌ترین الگوی مبتدی در صفحهٔ محتواست.

Block paragraph with inline pieces

html

HTML Code

<p>
Read the <a href="guide.html">guide</a> and note the
<strong>important</strong> words before you continue.
</p>
<div>This div is a separate block box on its own line.</div>

خواندن نمونهٔ پاراگراف

p یک جعبهٔ پاراگراف کامل است
a و strong در خط خواندن می‌مانند
div بعد از پاراگراف خط جدید می‌گیرد
برای دیدن پشته در برابر تودرتو هنوز به CSS نیاز نبود
اگر لینک تنها به خط بعد پرید، ببینید p زود بسته نشده باشد

`div` در برابر `span` برای گروه‌بندی

هر دو پوشش عمومی‌اند با معنای کم. تفاوت عملی برای مبتدی: div پیش‌فرض block و span پیش‌فرض inline. تکهٔ بخش‌مانند که باید خط خودش را بشکند → div (یا بعداً تگ semantic). عبارت کوتاه داخل جمله → span وقتی فقط قلاب استایل/اسکریپت می‌خواهید.

div versus span contrast

html

HTML Code

<p>Price: <span class="note">includes tax</span> today only.</p>
<div class="note">This whole note sits on its own block line.</div>

خواندن نمونهٔ div/span

span عبارت را داخل خط پاراگراف نگه می‌دارد
div یادداشت دوم را به ردیف block خودش می‌برد
class اختیاری است؛ درس تفاوت display است
وقتی جا دارد تگ معنایی را بر پوشش خالی ترجیح دهید
بعداً CSS می‌تواند span را شبیه block کند — پیش‌فرض برای مارکاپ بدون استایل مهم است

CSS بعداً display را عوض می‌کند

مرورگرها stylesheet پیش‌فرض دارند. CSS شما ممکن است display: block، inline، inline-block یا flex/grid بگذارد. برای همین آموزش می‌تواند span { display: block; } نشان دهد و عبارت مثل پاراگراف پشته شود. اول پیش‌فرض را یاد بگیرید تا override را بشناسید. جلسات بعدی (div، class، id) قلاب استایل می‌سازند؛ block در برابر inline نقشهٔ زیرین است.

تمرین در ویرایشگر

دو p بنویسید و پشته شدنشان را ببینید.
دو a داخل یک پاراگراف — در خط بمانند.
یک عبارت را یک‌بار span و یک‌بار div کنید — layout را مقایسه کنید.
strong دور یک واژه در پاراگراف — خط جدید اجباری نباشد.
یک div کنار p بگذارید و شکست block اضافه را ببینید.
زیر دمو سه تگ block و سه تگ inline بنویسید.
اختیاری: در DevTools مقدار computed display برای p و a را ببینید.

اشتباهات آسان

div برای هر عبارت کوچک به‌جای span یا تگ معنایی
انتظار خط جدید از strong یا a (پیش‌فرض inline)
فراموش کردن که CSS display بعداً override می‌کند
انتخاب تگ فقط برای ظاهر («می‌خواهم خط جدید») نه معنا + جریان
تودرتوی نادرست block داخل p
فقط div/span و نادیده گرفتن p و list و heading

خلاصه

پیش‌فرض block: خط جدید، عرض موجود
پیش‌فرض inline: ادامه داخل خط متن
ترکیب: ظرف block اغلب قطعهٔ inline دارد
برای قلاب کوتاه span؛ وقتی جا دارد تگ معنایی
CSS بعداً display را عوض می‌کند — اول پیش‌فرض
بعدی: تمرین عمیق‌تر با div به‌عنوان ظرف block

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان