تفاوت عناصر درون‌خطی و بلوکی در CSS چیست؟ آموزش Inline vs Block با مثال

در HTML و CSS، عناصر به دو دسته عناصر درون‌خطی (inline) و عناصر بلوکی (block-level) تقسیم می‌شوند، و این دسته‌بندی مشخص می‌کند که آن‌ها در چیدمان سند چگونه رفتار می‌کنند.

درک این تفاوت برای کنترل نحوه نمایش محتوا در یک صفحه وب بسیار مهم است.

عناصر بلوکی، عناصری هستند که به طور پیش‌فرض تمام عرض در دسترس را اشغال می‌کنند و در عرض ظرف خود کشیده می‌شوند.

این عناصر همیشه از یک خط جدید شروع می‌شوند و محتوای دیگر را به خط بعدی می‌فرستند، در نتیجه یک «بلوک» از محتوا ایجاد می‌کنند.

به طور پیش‌فرض، ویژگی CSS با مقدار display: block; روی عناصر بلوکی اعمال شده است. این ویژگی تضمین می‌کند که عنصر تمام عرض ظرف را پر کند و در یک خط جدید ظاهر شود.

برخی از عناصر بلوکی رایج عبارت‌اند از عناصر div، پاراگراف‌ها، headingها، لیست‌های ترتیبی، لیست‌های بدون ترتیب، و عناصر section.

در اینجا یک مثال کد از یک عنصر بلوکی آمده است:

<p style="border: 2px solid red;">
  First paragraph
</p>
<p>Second paragraph</p>

Open Sandbox

در این مثال، دو عنصر پاراگراف داریم که دور اولی یک حاشیه قرمز قرار داده شده است.

این دو عنصر پاراگراف در یک خط مشترک قرار نمی‌گیرند، چون به طور پیش‌فرض عناصر بلوکی هستند.

بنابراین، هر دو عنصر پاراگراف تمام عرض ظرف خود را اشغال می‌کنند، که در اینجا عنصر body است.

عناصر بلوکی زمانی ایده‌آل هستند که بخواهید محتوا به صورت عمودی روی هم قرار بگیرد، مانند پاراگراف‌ها، بخش‌ها، یا بلوک‌های بزرگ‌تر محتوا. از آن‌ها معمولاً برای تعریف چیدمان و ساختار یک صفحه وب استفاده می‌شود.

عناصر درون‌خطی، برخلاف عناصر بلوکی، فقط به اندازه‌ای که نیاز دارند عرض اشغال می‌کنند و از خط جدید شروع نمی‌شوند. این عناصر در جریان محتوا قرار می‌گیرند و اجازه می‌دهند متن و دیگر عناصر درون‌خطی در کنار آن‌ها ظاهر شوند.

به طور پیش‌فرض، ویژگی CSS با مقدار display: inline; روی عناصر درون‌خطی اعمال شده است. این ویژگی تضمین می‌کند که عنصر در جریان محتوا باقی بماند و به خط جدید نرود.

عناصر درون‌خطی رایج شامل span، anchor و img هستند.

در اینجا مثالی برای درک بهتر عناصر درون‌خطی آمده است:

<p>This is a
  <span style="color: red; border: 2px solid green;">red</span>
  word inside a paragraph.
</p>

Open Sandbox

در این مثال، یک عنصر span داریم که داخل یک عنصر پاراگراف قرار گرفته است. عنصر span دارای رنگ متن قرمز و یک حاشیه سبز در اطراف خود است تا کلمه برجسته‌شده بهتر دیده شود.

همان‌طور که می‌بینید، عنصر span فقط به اندازه کلمه "red" فضا اشغال می‌کند و محتوای بعدی را به خط جدید نمی‌فرستد.

عناصر درون‌خطی بهترین انتخاب برای استایل‌دهی بخش‌های کوچک‌تری از متن یا محتوا در یک خط هستند، مانند تاکید روی یک کلمه، ایجاد hyperlink، یا اعمال استایل‌های خاص روی قسمت‌هایی از یک پاراگراف.

سوالات

رفتار پیش‌فرض عناصر بلوکی در CSS چیست؟

• آن‌ها فقط به اندازه لازم عرض می‌گیرند و در جریان محتوا باقی می‌مانند.
• آن‌ها تمام عرض ظرف خود را اشغال می‌کنند و از یک خط جدید شروع می‌شوند.
• آن‌ها فقط برای تصاویر و لینک‌ها استفاده می‌شوند.
• آن‌ها همیشه در مرکز صفحه تراز می‌شوند.

کدام‌یک از موارد زیر نمونه‌ای از یک عنصر درون‌خطی است؟

• div
• p
• span
• section

چگونه می‌توان رفتار یک عنصر بلوکی را طوری تغییر داد که مانند یک عنصر درون‌خطی رفتار کند؟

• اعمال display: inline-block;
• اعمال display: flex;
• اعمال display: inline;
• اعمال display: none;