نمایش (Display)

ویژگی Display در CSS

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

مقادیر اصلی display

مقدار	توضیح	مثال
block	بلوک — تمام عرض	div, p
inline	در خط — به اندازه محتوا	span, a
inline-block	در خط + قابل تنظیم	img, button
none	مخفی ⭐	—
flex	فلکس‌باکس	مدرن
grid	گرید	مدرن

۱. Block (بلوکی)

عنصر تمام عرض والد را می‌گیرد و در خط جدید شروع می‌شود:

div, p, h1, ul, section {
        display: block;  /* پیش‌فرض */
    }

ویژگی	توضیح
عرض	۱۰۰٪ والد
خط جدید	قبل و بعد می‌شکند
width/height	✅ قابل تنظیم
margin/padding	✅ همه طرف‌ها

۲. Inline (در خط)

عنصر فقط به اندازه محتوایش جا می‌گیرد و در همان خط ادامه می‌دهد:

span, a, em, strong {
        display: inline;  /* پیش‌فرض */
    }

ویژگی	توضیح
عرض	به اندازه محتوا
خط جدید	❌ نمی‌شکند
width/height	❌ بی‌تأثیر
margin/padding	فقط افقی

۳. Inline-block (در خط + بلوکی)

ترکیب بهترین ویژگی‌های inline و block — در خط است اما width/height می‌پذیرد:

.badge {
        display: inline-block;
        padding: 5px 15px;
        background: #3498db;
        color: white;
        border-radius: 15px;
    }

۴. None (مخفی)

عنصر کاملاً مخفی می‌شود و فضایی اشغال نمی‌کند:

.hidden {
        display: none;
    }
    
    /* یا */
    [hidden] {
        display: none;
    }

تفاوت display:none و visibility:hidden

ویژگی	display:none	visibility:hidden
فضا اشغال می‌کند؟	❌ خیر	✅ بله
در DOM هست؟	✅ بله	✅ بله
قابل برگشت	✅	✅
فرزندان	همه مخفی	می‌توانند visible باشند

۵. Flex (فلکس‌باکس)

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

۶. Grid (گرید)

.container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
    }

عناصر HTML و display پیش‌فرض

Block	Inline
div	span
p	a
h1-h6	em
ul, ol	strong
section	code
header	img (inline-block)

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

• از display: none برای مخفی کردن کامل استفاده کنید
• از display: inline-block برای عناصر در خط با ابعاد قابل تنظیم
• برای منوهای افقی از flex یا inline-block استفاده کنید
• از display: flex برای چیدمان‌های یک‌بعدی
• از display: grid برای چیدمان‌های دوبعدی
• تغییر display عنصر را در ذهن داشته باشید — چیدمان تغییر می‌کند

نکات مهم

• عناصر inline به width و height پاسخ نمی‌دهند
• عناصر inline-block می‌توانند فاصله‌های ناخواسته (whitespace) داشته باشند
• display: none عنصر را از flow صفحه حذف می‌کند
• برای انیمیشن مخفی کردن، از opacity یا max-height استفاده کنید
• عنصر با display: none توسط صفحه‌خوان هم خوانده نمی‌شود