در حال بارگذاری...

display در CSS

display به یک سؤال آرام جواب می‌دهد: این جعبه چطور وارد صفحه می‌شود؟ بعضی‌ها مثل بلوک تمام‌عرض روی خط خودشان می‌ایستند؛ بعضی داخل جمله می‌نشینند؛ بعضی را می‌شود از چیدمان کلاً برداشت. این درس مقدارهای روزمره را نقشه می‌کند — و تمرین عمیق inline-block را برای جلسهٔ بعدی می‌گذارد.

جعبهٔ ابزار display

📊 display یک‌نگاهه

مقدار کار روزمره
block روی خط خودش شروع می‌شود؛ اغلب عرض ردیف را پر می‌کند
inline داخل خط متن زندگی می‌کند؛ width/height معمولاً نادیده گرفته می‌شود
inline-block مثل متن کنار هم می‌نشیند، اما width و height و padding را مثل جعبه می‌پذیرد
none عنصر را از چیدمان برمی‌دارد (فضایش جمع می‌شود)
flex / grid حالت‌های چیدمان قوی — درس‌های بعدی، نه اینجا

خود HTML برای خیلی از تگ‌ها display پیش‌فرض دارد (div بلوک است، span درون‌خطی، button اغلب شبیه inline-block). وقتی جریان صفحه کار دیگری می‌خواهد، CSS همان را عوض می‌کند.

block — خط خودش، جعبهٔ جادار

جعبهٔ block از خط تازه شروع می‌شود و معمولاً عرض موجود را می‌گیرد. عنوان‌ها، پاراگراف‌ها و divها پیش‌فرض همین‌طورند.

اجبار به block

css
CSS Code 
.badge {
display: block;
width: 12rem;
padding: 0.5rem 0.75rem;
background: #e8f0ff;
}

inline — داخل جمله

جعبهٔ inline داخل جریان متن می‌نشیند و با کلمه‌ها می‌شکند. گذاشتن width یا height روی inline خالص معمولاً فایدهٔ جدی ندارد — برای همین سراغ block یا inline-block می‌روند.

اجبار به inline

css
CSS Code 
.note-label {
display: inline;
color: #0b5fff;
font-weight: 600;
}

inline-block — یک نگاه کوتاه

inline-block همسایه‌ها را وقتی جا باشد روی یک خط نگه می‌دارد، ولی width و height و padding را جدی می‌گیرد. در درس بعدی درست تمرینش می‌کنید؛ اینجا فقط هیبرید را بشناسید.

نگاه کوتاه به inline-block

css
CSS Code 
.chip {
display: inline-block;
padding: 0.35rem 0.7rem;
border: 1px solid #c5c5c5;
border-radius: 999px;
}

none — از چیدمان برو بیرون

display: none عنصر را پنهان می‌کند و فضایش را جمع می‌کند. هم چیدمان، هم خیلی از ابزارهای کمکی، انگار دیگر آنجا نیست. به‌جای قانون پراکنده، با کلاس روشن/خاموش کنید.

پنهان با none

css
CSS Code 
.is-hidden {
display: none;
}

visibility: hidden داستان دیگری است — جعبه هنوز ممکن است جا رزرو کند. این درس برای برداشتن واقعی از چیدمان روی display: none می‌ماند. اینجا سراغ visibility نمی‌رویم.

عادت آرام display

display را برای کار جریان عوض کنید — نه برای آرایش دکمه (درس قبلی) و نه به‌عنوان میان‌بر هر مشکل چیدمان (flex/grid بعداً می‌آیند). حالت‌های عمدی را با کلاس نام بگذارید.

کلاس‌های نشان دادن و پنهان

css
CSS Code 
.panel {
display: block;
padding: 1rem;
border: 1px solid #ddd;
}

.panel.is-hidden {
display: none;
}

مقایسهٔ سه حالت

css
CSS Code 
.demo-block { display: block; background: #e8f0ff; margin: 0.25rem 0; }
.demo-inline { display: inline; background: #fff3cd; }
.demo-ib { display: inline-block; width: 6rem; background: #d8f5e7; }

خودتان امتحان کنید

  1. یک span را display: block کنید و width و padding بدهید.
  2. یک div کوتاه (یا عنوان) را display: inline کنید و ببینید داخل جمله می‌نشیند.
  3. یک .chip با inline-block بسازید — ببینید width و padding کار می‌کنند.
  4. یک پنل را با .is-hidden { display: none; } پنهان کنید و کلاس را عوض کنید.
  5. یک جمله بنویسید: برای برچسب، کی block می‌گذارید و کی inline؟

اشتباهات رایج

  • انتظار داشتن که width / height روی inline خالص کار کند
  • استفاده از display: none وقتی فقط می‌خواستید ظاهر را کم‌رنگ کنید — و فراموش کردن که فضا جمع می‌شود
  • این درس را مثل پوسته‌های hover دکمه دیدن (آن درس Buttons بود)
  • ریختن دستورهای Flexbox/Grid اینجا به‌جای یادگیری چهار مقدار پایه
  • قاطی کردن «پنهان از چیدمان» با درس عمیق‌تر inline-block بعدی

خلاصه

  • display می‌گوید جعبه چطور وارد جریان صفحه می‌شود
  • block خط خودش را می‌گیرد؛ inline داخل متن زندگی می‌کند
  • inline-block هیبرید است — تمرین جدیش جلسهٔ بعد
  • none عنصر و فضایش را از چیدمان برمی‌دارد
  • display را برای کار جریان عوض کنید؛ چیدمان‌های پیچیده را برای درس‌های بعد بگذارید

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
7
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 35 از 35
Css آموزش