کنترل نمایش با ویژگی display در CSS
ویژگی display یکی از مهم‌ترین ابزارهای CSS برای کنترل نحوه نمایش عناصر در صفحه وب است. این ویژگی تعیین می‌کند که یک عنصر چگونه در صفحه چیدمان شود و چگونه با سایر عناصر تعامل داشته باشد.
درک صحیح از ویژگی display پایه‌ای اساسی برای طراحی واکنش‌گرا و ایجاد طرح‌بندی‌های پیچیده است.
مقادیر پرکاربرد display
| مقدار |
توضیحات |
| block |
عنصر به صورت بلوکی نمایش داده می‌شود و کل عرض موجود را اشغال می‌کند |
| inline |
عنصر درون خطی نمایش داده می‌شود و فقط فضای مورد نیاز خود را اشغال می‌کند |
| inline-block |
ترکیبی از inline و block که امکان تنظیم عرض و ارتفاع را فراهم می‌کند |
| flex |
طرح‌بندی انعطاف‌پذیر برای چیدمان یک‌بعدی عناصر |
| grid |
طرح‌بندی شبکه‌ای برای چیدمان دو بعدی عناصر |
تفاوت‌های کلیدی
- عناصر block همیشه در خط جدید شروع می‌شوند و عرض کامل را می‌گیرند
- عناصر inline درون خط متن قرار می‌گیرند و نمی‌توان برای آنها عرض و ارتفاع تعیین کرد
- inline-block مانند inline است اما می‌تواند دارای عرض و ارتفاع باشد
- مقادیر flex و grid برای طرح‌بندی‌های مدرن استفاده می‌شوند
برای یادگیری عمیق‌تر درباره این ویژگی، می‌توانید به آموزش جامع کلیک کنید مراجعه نمایید.
کاربردهای عملی
در طراحی وب، انتخاب مقدار مناسب display بستگی به نیازهای طرح‌بندی دارد. برای مثال:
- برای ایجاد نوارهای افقی منو از inline-block استفاده می‌شود
- برای ساخت کارت‌های محصول معمولاً از flex یا grid استفاده می‌کنیم
- عناصر پاراگراف و هدرها معمولاً به صورت پیش‌فرض block هستند
توجه داشته باشید که برخی عناصر مانند <div> به صورت پیش‌فرض block هستند، در حالی که عناصری مانند <span> به صورت inline نمایش داده می‌شوند. با استفاده از ویژگی display می‌توان این رفتار پیش‌فرض را تغییر داد.
