تفاوت عناصر بلاک و اینلاین

هر عنصر HTML بر اساس نحوه‌ی نمایش پیش‌فرضش، در یکی از دو دسته‌ی «بلاک» یا «اینلاین» قرار می‌گیرد.

عناصر بلاک (Block-level)

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

<div>...</div>
<p>...</p>
<h1>...</h1>
<ul>...</ul>
<table>...</table>

عناصر اینلاین (Inline)

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

<span>...</span>
<a>...</a>
<b>...</b>
<img>

یک مثال مقایسه‌ای

<p>این یک پاراگراف است که یک <span>کلمه‌ی اینلاین</span> در وسط آن قرار دارد و خط را نمی‌شکند.</p>

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