یکی از مفاهیم پایه‌ای و در عین حال بسیار مهم در HTML، درک تفاوت بین تگ‌های خطی (Inline) و بلوکی (Block) است. این تفاوت نحوه نمایش عناصر در صفحه و تعامل آن‌ها با یکدیگر را تعیین می‌کند و برای چیدمان و استایل‌دهی صحیح صفحات وب ضروری است.

۱. تگ‌های بلوکی (Block-level Elements)

تگ‌های بلوکی به گونه‌ای رفتار می‌کنند که انگار هر کدام یک “بلوک” مستقل و جداگانه را در صفحه اشغال می‌کنند.

ویژگی‌های کلیدی تگ‌های بلوکی:

  • شروع در خط جدید: هر تگ بلوکی به طور پیش‌فرض، محتوای خود را از ابتدای یک خط جدید شروع می‌کند و فضایی را تا انتهای خط اشغال می‌کند.
  • اشغال کل عرض موجود: یک تگ بلوکی تمام عرض موجود کانتینر والد خود را اشغال می‌کند، مگر اینکه عرض آن به صورت دستی محدود شده باشد (با استفاده از CSS).
  • قابلیت تعیین عرض و ارتفاع: می‌توان برای تگ‌های بلوکی، عرض (width) و ارتفاع (height) مشخصی تعریف کرد.
  • امکان تعریف Margin و Padding در هر چهار جهت: می‌توان برای تگ‌های بلوکی، فاصله خارجی (Margin) و داخلی (Padding) را در بالا، پایین، چپ و راست تنظیم کرد.
  • قرارگیری در کنار هم: تگ‌های بلوکی نمی‌توانند در کنار یکدیگر قرار بگیرند؛ آن‌ها به صورت عمودی (یکی پس از دیگری) در صفحه نمایش داده می‌شوند.

تگ‌های بلوکی رایج:

<div>, <p>, <h1> تا <h6>, <ul>, <ol>, <li>, <table>, <form>, <header>, <footer>, <section>, <article>, <aside>, <nav>, <blockquote> و …

م

۲. تگ‌های خطی (Inline Elements)

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

ویژگی‌های کلیدی تگ‌های خطی:

  • شروع در خط فعلی: عناصر خطی در جریان متن قرار می‌گیرند و در همان خطی که هستند، نمایش داده می‌شوند.
  • اشغال فضای محتوا: فقط به اندازه‌ی محتوای خودشان عرض اشغال می‌کنند.
  • عدم قابلیت تعیین عرض و ارتفاع: تعیین width و height برای تگ‌های خطی معمولاً تأثیری ندارد (مگر با تغییر display آن‌ها).
  • محدودیت در Margin و Padding: Margin و Padding در جهت بالا و پایین برای تگ‌های خطی معمولاً نادیده گرفته می‌شود یا تأثیر محدودی دارد. Margin و Padding در جهت چپ و راست همچنان کار می‌کنند.
  • قرارگیری در کنار هم: تگ‌های خطی می‌توانند در کنار یکدیگر قرار بگیرند تا زمانی که فضای خط کافی باشد.

تگ‌های خطی رایج:

<span>, <a>, <strong>, <em>, <b>, <i>, <img>, <br>, <input>, <label>, <code>, <q> و …

۳. تگ‌های خطی-بلوکی (Inline-Block Elements)

CSS به ما امکان می‌دهد تا رفتار عناصر را تغییر دهیم. یکی از این تغییرات، تبدیل یک عنصر به حالت inline-block است. این حالت ترکیبی از ویژگی‌های تگ‌های خطی و بلوکی را دارد:

  • در کنار عناصر دیگر قرار می‌گیرد: مانند عناصر خطی.
  • قابلیت تعیین عرض و ارتفاع: مانند عناصر بلوکی.
  • قابلیت اعمال Margin و Padding در هر چهار جهت: مانند عناصر بلوکی.

تگ <img> به طور پیش‌فرض رفتار inline-block دارد. همچنین می‌توان با CSS، هر عنصری را به inline-block تبدیل کرد (مثلاً display: inline-block;).

تفاوت کلیدی در یک نگاه


ویژگی تگ بلوکی (Block) تگ خطی (Inline)
شروع در خط جدید بله خیر
عرض کل عرض موجود (قابل تنظیم) به اندازه‌ی محتوا (غیر قابل تنظیم)
ارتفاع قابل تنظیم غیر قابل تنظیم (مگر با CSS)
Margin/Padding در هر چهار جهت فقط چپ/راست (اثر محدود بالا/پایین)
قرارگیری کنار هم خیر (عمودی) بله (افقی)
مثال‌های رایج <div>, <p>, <h1> <span>, <a>, <strong>, <img>

کلیدواژه ها : HTML Block Elements-HTML Inline Elements-تگ خطی-تگ بلوکی-Display Property-Inline-Block-چیدمان HTML-ساختار صفحه-