تک دیک

واژه نامه و مجله آموزشی کامپیوتر و فناوری

المان های اینلاین در HTML

از لحاظ نمایشی، المان ها در HTML به دو دسته سطح بلاک (block-level) و سطح اینلاین (inline-level یا درخط) تقسیم می‌شوند. به عبارت بهتر هر المانی در HTML بسته به نوع خود به صورت پیشفرض یکی از انواع نمایشی بلاک یا اینلاین را دارا می‌باشد. در این قسمت از مجموعه آموزش HTML تک دیک با المان های اینلاین و تفاوت آن‌ها با المان های سطح بلاک آشنا می‌شوید.

منظور از المان اینلاین (یا inline element) در HTML چیست؟

المان های سطح اینلاین (inline-level elements) یا به اختصار المان های اینلاین (inline elements) گونه‌ای از المان ها در اچ‌تی‌ام‌ال هستند که در حالت پیشفرض صرفا به اندازه نیازشان، فضا را اشغال می‌کنند. به عبارت دقیق‌تر این المان‌ها لزوما روی یک خط جدید شروع نمی‌شوند و همان فضای افقی (Width) موردنیاز خود را اشغال می‌کنند؛ نه تمام فضای افقی در دسترس المان را.

پیوندها (یا المان های <a>) و المان های <span> از جمله المان‌های اینلاین یا درخط محسوب می‌شوند.

مثال زیر مفهوم المان های سطح اینلاین را با کمک یک المان <span> نمایش می‌دهد. برای نمایش فضای اشغال شده توسط این المان، رنگ زمینه آن با کمک CSS تغییر داده شده است.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello, World!</title>
    <style>
      span {
        background-color: #2fdf2f;
      }
    </style>
  </head>
  <body>
    <h1>Simple Page</h1>
    <p>This paragraph contains an <span>inline element</span> with a different background.</p>
  </body>
</html>

نمایی از یک المان اینلاین span و فضای اشغال شده توسط آن در یک پاراگراف

همانطور که در تصویر فوق مشاهده می‌کنید المان <span> تنها به میزان موردنیاز برای نگهداری محتوای المان (یعنی عبارت inline element)، فضا را اشغال می‌کند و این محتوا بدون اینکه پاراگراف شکسته شود به عنوان بخشی از پاراگراف رندر می‌شود.

تفاوت بین المان های سطح بلاک و اینلاین

همانطور که گفتیم المان های اینلاین تنها به اندازه ضرورت، فضای افقی را اشغال می‌کنند و می‌توانند هرجایی (مانند بخشی از یک خط) ظاهر شوند. این درحالیست که المان های سطح بلاک در قالب یک بلوک روی خطی جدید آغاز می‌شوند و تمام فضای افقی موجود را اشغال می‌کنند. هدینگ ها (المان های <h1> تا <h6>)، پاراگراف ها (المان های <p>) و المان های <div> از جمله المان های سطح بلاک محسوب می‌شوند.

برای درک بهتر این تفاوت، رنگ زمینه المان‌های <h1> و <p> در مثال قبل را با کمک CSS تغییر می‌دهیم. این دو المان به عنوان المان های سطح بلاک با رنگ زمینه زرد در تصویر زیر قابل مشاهده هستند. همانطور که در تصویر مشاهده می‌کنید المان های سطح بلاک، فضای افقی در دسترس خود را به طور کامل تا انتها اشغال می‌کنند.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello, World!</title>
    <style>
      h1, p {
        background-color: yellow;
      }
      span {
        background-color: #2fdf2f;
      }
    </style>
  </head>
  <body>
    <h1>Simple Page</h1>
    <p>This paragraph contains an <span>inline element</span> with a different background.</p>
  </body>
</html>

مقایسه المان اینلاین span با دو المان سطح بلاک پاراگراف و هدینگ

بیشتر بخوانید: آشنایی با جزئیات المان های سطح بلاک در HTML

المان های اینلاین به صورت متداول نمی‌توانند شامل المان های سطح بلاک شوند. اما المان های سطح بلاک می‌توانند هر نوع المانی چه از نوع اینلاین و چه از نوع بلاک را دربربگیرند.

بیشتر بخوانید: المان های تو در تو (یا Nested Elements) در HTML

تغییر نحوه نمایش المان ها از اینلاین به سطح بلاک

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

a {
  display: block;
}

لیست المان های inline

المان های زیر در اچ‌تی‌ام‌ال، المان های سطح اینلاین هستند:

  • <a>
  • <abbr>
  • <acronym>
  • <audio> (در صورتی که کنترل های آشکار داشته باشد)
  • <b>
  • <bdi>
  • <bdo>
  • <big>
  • <br>
  • <button>
  • <canvas>
  • <cite>
  • <code>
  • <data>
  • <datalist>
  • <del>
  • <dfn>
  • <em>
  • <embed>
  • <i>
  • <iframe>
  • <img>
  • <input>
  • <ins>
  • <kbd>
  • <label>
  • <map>
  • <mark>
  • <meter>
  • <noscript>
  • <object>
  • <output>
  • <picture>
  • <progress>
  • <q>
  • <ruby>
  • <s>
  • <samp>
  • <script>
  • <select>
  • <slot>
  • <small>
  • <span>
  • <strong>
  • <sub>
  • <sup>
  • <svg>
  • <template>
  • <textarea>
  • <time>
  • <u>
  • <tt>
  • <var>
  • <video>
  • <wbr>

بازگشت به فهرست مجموعه آموزشی HTML

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *