در HTML، هر تگ یا Block-level هست یا Inline-level.
این دسته‌بندی تعیین می‌کنه که عنصر چطور در صفحه نمایش داده بشه.

1️⃣ عناصر Block (بلوک)

• همیشه یک خط کامل رو می‌گیرند.

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

• می‌تونن عناصر دیگه (Block یا Inline) رو داخل خودشون داشته باشن.

✅ مثال از عناصر Block:

<div>این یک div است</div>
<p>این یک پاراگراف است</p>
<h1>عنوان</h1>
<ul>
  <li>آیتم ۱</li>
</ul>

🔸 خروجی: هر کدوم توی خط جدا نمایش داده میشه.

2️⃣ عناصر Inline (درون‌خطی)

• فقط به اندازه محتوای خودشون جا می‌گیرن.

• خط جدید ایجاد نمی‌کنن.

• معمولاً داخل عناصر Block استفاده می‌شن.

✅ مثال از عناصر Inline:

<span>این یک span است</span>
<a href="#">این یک لینک است</a>
<strong>متن بولد</strong>
<em>متن ایتالیک</em>
<img src="image.jpg" alt="عکس">

🔸 خروجی: همه در یک خط کنار هم نمایش داده میشن.

3️⃣ تفاوت تصویری

<div style="border: 1px solid red;">Block</div>
<span style="border: 1px solid blue;">Inline</span>
<span style="border: 1px solid green;">Inline</span>

• div (بلوک) یک خط جدا می‌گیره.

• span ها (اینلاین) پشت سر هم میان.

4️⃣ تبدیل Block به Inline یا برعکس

گاهی نیاز داریم نوع نمایش پیش‌فرض تغییر کنه. این کار با CSS انجام میشه:

.block-to-inline {
  display: inline;
}

.inline-to-block {
  display: block;
}

📌 خلاصه:

• Block = کل عرض رو می‌گیره (مثل: div, p, h1–h6, ul, table)

• Inline = فقط به اندازه محتوا (مثل: span, a, strong, img)