عنصرهای Block و Inline

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< HTML:Tutorial(تغییرمسیر از تگ div)
پرش به ناوبری پرش به جستجو

هر عنصر یک مقدار نمایش پیش فرض براساس به نوع عنصر دارد.[۱]

دو مقدار نمایش عبارتند از :block و inline.

عنصرهای سطح بلوک (Block-level)

یک عنصر سطح بلاک همیشه در یک خط جدید شروع می‌شود و کل عرض موجود را اشغال می‌کند (به سمت چپ و راست تا جایی که می‌تواند کِش می‌آید).

عنصر <div> یک عنصر سطح بلوک است.


مثال

<div>Hello World</div>


مشاهدهٔ نتیجه


عنصرهای سطح بلوک در HTML:

عنصرهای درون خطی (Inline)

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

این یک عنصر درون خطی <span> داخل یک پاراگراف است.


مثال

<span>Hello World</span>


مشاهدهٔ نتیجه


عنصرهای درون خطی در HTML:

عنصر <div>

عنصر <div> اغلب بعنوان یک ظرف (Container) برای عنصرهای HTML دیگر استفاده می‌شود.

عنصر <div> هیچ ویژگی مورد نیازی ندارد اما style, class و id ویژگی‌های متداول هستند.

زمانی که <div> و CSS با باهم استفاده شوند می‌تواند برای استایل‌دهی به بلاک‌های محتوا استفاده شود:

مثال

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>


مشاهدهٔ نتیجه


عنصر <span>

عنصر <span> اغلب بعنوان ظرف برای متن استفاده می‌شود.

عنصر <span>هیچ ویژگی مورد نیازی ندارد اما style, class و id ویژگی‌های متداول هستند.

زمانی که <span> و CSS با باهم استفاده شوند می‌تواند برای استایل‌دهی به بخش‌هایی از محتوا استفاده شود:

مثال

<h1>My <span style="color:red">Important</span> Heading</h1>


مشاهدهٔ نتیجه


تگ های گروه بندی HTML

تگ توصیف
<div> یک بخش در سند را مشخص می‌کند (سطح بلوک)
<span> یک بخش در سند را مشخص می‌کند (درون خطی)
برای دستیابی به لینک کامل همهٔ تگ‌های HTML، از مرجع تگ HTML ما بازدید کنید.



منابع آموزشی