عنصرهای Block و Inline

---

« صفحهٔ قبل

صفحهٔ بعد »

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

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

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

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

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

مثال

<div>Hello World</div>

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

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

<address> • <article> • <aside> • <blockquote> • <canvas> • <dd> • <div> • <dl> • <dt> • <fieldset> • <figcaption> • <figure> • <footer> • <form> • <h1>-<h6> • <header> • <hr> • <li> • <main> • <nav> • <noscript> • <ol> • <p> • <pre> • <section> • <table> • <tfoot> • <ul> • <video>

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

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

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

مثال

<span>Hello World</span>

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

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

<a> • <abbr> • <acronym> • <b> • <bdo> • <big> • <br> • <button> • <cite> • <code> • <dfn> • <em> • <i> • <img> • <input> • <kbd> • <label> • <map> • <object> • <output> • <q> • <samp> • <script> • <select> • <small> • <span> • <strong> • <sub> • <sup> • <textarea> • <time> • <tt> • <var> •

عنصر <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 ما بازدید کنید.

---

« صفحهٔ قبل

صفحهٔ بعد »