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

المان های اینلاین یا inline elements در 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

تولید و انتشار محتوای تخصصی علاوه بر زمان، هزینه هم دارد. بخش عمده هزینه‌های تک‌دیک با بودجه شخصی و حمایت‌های شما کاربران گرامی تأمین می‌شود. اگر محتوای این صفحه برای شما مفید واقع شده با روش‌های مختلفی از سراسر دنیا می‌توانید در تکمیل و تداوم فعالیت این سایت به گروه کوچک ما کمک کنید و در اجر معنوی آن نیز سهیم شوید. ما صمیمانه قدردان این محبت شما هستیم.

حمایت می‌کنم…

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

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

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

دیدگاه‌ها

دیدگاهتان را بنویسید لغو پاسخ

نوشته‌های بیشتر

سلام وقت شما بخیر. لینک افزونه برای مرورگر داخل متن درج شده. مثلا در مرورگر کروم به لینک مربوط در…

سلام ممنون از وبسایت زیبای تان لطفا رهنمایی کنید من چگونه میتوانم افزونه ها را دریافت کنم

سلام احتمالا می تونید با غیرفعال کردن نوتیفیکیشن مرورگر در تنظیمات دستگاه این مشکل رو حل کنید

زنده باد سلطان

ویبره زدن بعضی سایت ها قطع نمیشه کلافم کرده

بله انها متوجه میشوند چون پیامهایی که از لیست انتشار ارسال میشه یک تیک شبیه بلندگو پایین ش داره و…

سلام. می‌تونید با کمک یک دستور شرطی (کنترل)، یک دستور عملگر و دستورات مربوط به مکان شکلک، مانع از ورود…