سی‌اس‌اس/display

مدل جعبه‌ای

display

position

ویژگی display در CSS

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

کاربرد اصلی

ویژگی display ساختار پایه‌ای چینش المان‌ها را در صفحه مشخص می‌کند و تأثیر مستقیمی بر نحوهٔ قرارگیری عناصر در کنار هم دارد. بدون شناخت دقیق این ویژگی، طراحی لایه‌بندی و ساختار صفحات بسیار دشوار خواهد بود.

دستور کلی

element {
  display: value;
}

مقادیر رایج ویژگی display

۱. display: block

عنصر را به صورت بلاک (بلوک) نمایش می‌دهد. این یعنی عرض کامل والد خود را می‌گیرد و همیشه در خط جدید قرار می‌گیرد.

div {
  display: block;
}

مثال: تگ‌های HTML مانند <div> و <p> به صورت پیش‌فرض display: block دارند.

۲. display: inline

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

span {
  display: inline;
}

مثال: تگ‌هایی مثل <span> و <a> پیش‌فرض inline هستند.

۳. display: inline-block

ترکیبی از inline و block. عنصر در یک خط باقی می‌ماند ولی می‌توان به آن عرض و ارتفاع داد.

button {
  display: inline-block;
}

۴. display: none

عنصر را کاملاً از صفحه حذف می‌کند، طوری که هیچ فضایی اشغال نمی‌کند.

.hidden {
  display: none;
}

نکته: با visibility: hidden عنصر فقط نامرئی می‌شود ولی فضا را حفظ می‌کند.

۵. display: flex

عنصر را به یک کانتینر انعطاف‌پذیر (flex container) تبدیل می‌کند. با استفاده از این حالت می‌توان عناصر داخلی را به‌صورت پویا و قابل کنترل در محورهای مختلف تنظیم کرد.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

۶. display: grid

عنصر را به یک **شبکه (گرید)** تبدیل می‌کند. امکان تقسیم‌بندی صفحه به خطوط و ستون‌ها را فراهم می‌سازد.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

۷. display: inline-flex

مثل flex است ولی عنصر به‌صورت درون‌خطی نمایش داده می‌شود.

۸. display: inline-grid

مثل grid ولی نمایش آن درون‌خطی است.

مقادیر سطح پایین‌تر (CSS 3 و جدیدتر)

در سطح پایین‌تر، مقدار display به دو بخش تقسیم می‌شود:

display: <outside> <inside>;

برای مثال:

article {
  display: block flow;
}

اما این نوع نوشتار بیشتر در استانداردهای مرورگر استفاده می‌شود و برای طراحان معمولا همان مقادیر رایج کفایت می‌کند.

نکات مهم

مقدار display فقط نوع نمایش عنصر را تعیین می‌کند؛ برای موقعیت‌یابی دقیق باید از ویژگی‌هایی مانند position، margin، padding و ... استفاده کرد.
تغییر display از block به inline باعث می‌شود ویژگی‌هایی مانند width و height بی‌اثر شوند.
در فلکس و گرید، عناصر فرزند نیز می‌توانند با ویژگی‌های خاص خود (مثل flex-grow، grid-column) رفتار کنند.

تمرین‌ها

تمرین ۱: تفاوت بین inline و block

یک فایل HTML ساده بسازید و در آن دو تگ div و span قرار دهید. سپس با CSS نحوه نمایش آن‌ها را تغییر دهید و نتیجه را بررسی کنید.

تمرین ۲: ساخت گالری با Flexbox

یک بخش گالری بسازید که تصاویر را با display: flex در ردیف‌هایی منظم نمایش دهد.

تمرین ۳: مخفی کردن و نمایش دادن عنصر

با استفاده از display: none و جاوااسکریپت، دکمه‌ای بسازید که با کلیک روی آن یک بخش از صفحه پنهان یا ظاهر شود.

جمع‌بندی

ویژگی display از پایه‌های طراحی وب با CSS است. درک صحیح از انواع حالت‌های نمایشی مانند block، inline، flex و grid، راه را برای طراحی حرفه‌ای و ریسپانسیو هموار می‌کند. تمرین و تجربه در کار با این ویژگی به شما کمک می‌کند تا کنترل بیشتری روی چیدمان عناصر داشته باشید.

مطالعه بیشتر