خصوصیت display در CSS یکی از بنیادی‌ترین و پرکاربردترین خصوصیات است که نحوه نمایش و رفتار یک المان در صفحه را تعیین می‌کند. این خصوصیت مشخص می‌کند که یک المان چگونه در جریان عادی صفحه قرار می‌گیرد، چگونه با عناصر دیگر تعامل دارد و چه نوع جعبه‌ای (Box) را تشکیل می‌دهد.

۱. مقادیر رایج display:

  • block (بلوکی):

  • رفتار: المان‌های بلوکی همیشه در یک خط جدید شروع می‌شوند و تمام عرض موجود را اشغال می‌کنند (مگر اینکه عرض دیگری برایشان تعیین شده باشد). آن‌ها جعبه‌هایی با ابعاد کامل (شامل عرض، ارتفاع، padding، margin و border) تشکیل می‌دهند.

  • مثال: <div>, <p>, <h1> تا <h6>, <ul>, <ol>, <li>, <form>.

  • کاربرد: مناسب برای ساختارهای اصلی صفحه، پاراگراف‌ها، عناوین، لیست‌ها و بلوک‌های محتوایی مستقل.

  • inline (درون‌خطی):

  • رفتار: المان‌های درون‌خطی در جریان عادی متن قرار می‌گیرند و فقط به اندازه محتوای خود عرض اشغال می‌کنند. آن‌ها در همان خطی که هستند، کنار سایر عناصر درون‌خطی قرار می‌گیرند. خصوصیات width و height مستقیماً روی آن‌ها تأثیر نمی‌گذارند و margin و padding فقط در جهت افقی (چپ و راست) به درستی اعمال می‌شوند، اما در جهت عمودی (بالا و پایین) ممکن است باعث همپوشانی با خطوط دیگر شوند.

  • مثال: <span>, <a>, <strong>, <em>, <img> (گرچه img گاهی اوقات رفتاری شبیه بلوکی دارد).

  • کاربرد: مناسب برای بخش‌های کوچک متن، لینک‌ها، یا برچسب‌گذاری بخش‌هایی از محتوای درون یک بلوک.

  • inline-block (درون‌خطی-بلوکی):

  • رفتار: این مقدار ترکیبی از دو حالت بالاست. المان‌های inline-block در جریان عادی متن قرار می‌گیرند (کنار عناصر دیگر نمایش داده می‌شوند)، اما مانند عناصر بلوکی، می‌توانند خصوصیات width, height, margin (در هر چهار جهت) و padding را به درستی بپذیرند و ابعاد مشخصی داشته باشند.

  • کاربرد: بسیار مفید برای ایجاد آیتم‌هایی که باید در کنار هم قرار گیرند اما هر کدام نیاز به ابعاد و فاصله‌گذاری مستقل دارند، مانند آیتم‌های منو، کارت‌های کوچک، یا دکمه‌ها.

  • none (هیچ):

  • رفتار: المان عملاً از صفحه حذف می‌شود. انگار که در HTML وجود ندارد. نه تنها نمایش داده نمی‌شود، بلکه فضایی نیز اشغال نمی‌کند و بر جریان صفحه تأثیر نمی‌گذارد.

  • کاربرد: مخفی کردن موقت یا دائمی عناصر، یا نمایش/عدم نمایش عناصر بر اساس منطق جاوااسکریپت (مثلاً منوهای بازشو).

۲. مقادیر مدرن برای چیدمان:

  • flex (Flex Container):

  • رفتار: وقتی یک المان به عنوان display: flex تعریف می‌شود، به یک “کانتینر فلکس” تبدیل می‌شود. این کانتینر، فرزندان مستقیم خود را به صورت یک‌بعدی (در یک سطر یا ستون) سازماندهی می‌کند و امکان کنترل دقیق بر تراز، توزیع فضا و جهت‌گیری آن‌ها را فراهم می‌آورد.

  • کاربرد: ایده‌آل برای ساختاردهی یک‌بعدی مانند منوها، ردیف کارت‌ها، یا فرم‌های ساده.

  • grid (Grid Container):

  • رفتار: وقتی یک المان به عنوان display: grid تعریف می‌شود، به یک “گرید کانتینر” تبدیل می‌شود. این کانتینر، فرزندان مستقیم خود را در یک ساختار دو‌بعدی (شامل سطر و ستون) سازماندهی می‌کند. این روش کنترل بسیار دقیقی بر روی چیدمان پیچیده و دوبعدی ارائه می‌دهد.

  • کاربرد: ایده‌آل برای ساختار کلی صفحه وب (Layout) و چیدمان‌های پیچیده دو‌بعدی.

۳. سایر مقادیر مهم:

  • inline-flex: مشابه flex است، اما کانتینر فلکس به صورت درون‌خطی رفتار می‌کند (یعنی کنار عناصر دیگر قرار می‌گیرد و فقط به اندازه محتوای خود عرض اشغال می‌کند).
  • inline-grid: مشابه grid است، اما کانتینر گرید به صورت درون‌خطی رفتار می‌کند.
  • table, table-row, table-cell: این مقادیر باعث می‌شوند که المان مانند یک سلول، ردیف یا جدول HTML رفتار کند. برای چیدمان‌های جدولی پیچیده که نیاز به رفتارهای خاص table دارند، استفاده می‌شود، اما معمولاً Flexbox و Grid جایگزین‌های مدرن‌تر و انعطاف‌پذیرتری هستند.

درک و استفاده صحیح از خصوصیت display برای پیاده‌سازی هرگونه چیدمان پیچیده یا کنترل رفتار نمایش المان‌ها در CSS ضروری است.

کلیدواژه ها : Display CSS-رفتار نمایش المان-block-inline-inline-block-none-flex-grid-inline-flex-inline-grid-table-