آموزش کامل display در CSS

این جلسه ادامه دوره کامل آموزش CSS آوای وبه. تو جلسه پنجم یاد گرفتیم هر عنصر از چهار لایه Content، Padding، Border و Margin تشکیل شده. حالا وقتشه با display در CSS کامل آشنا بشیم — یعنی بفهمیم این باکس‌ها اصلاً چطور رفتار کنن و کنار هم قرار بگیرن.

اگه Box Model بگه «هر عنصر چه شکلیه»، display می‌گه «این عنصر تو صفحه چطور جا می‌گیره». همین یه ویژگی، پایه‌ی تقریباً هر تصمیم چیدمانی (Layout) تو CSSه.

🎯 اهداف یادگیری این جلسه

• فرق دقیق Block، Inline و Inline-block رو با مثال بفهمی
• با display: none، list-item و مقادیر مرتبط با جدول آشنا بشی
• flow-root رو به‌عنوان راه‌حل مدرن مشکل قدیمی Clearfix یاد بگیری
• با سینتکس دو-مقداری جدید display (مثل inline flex) آشنا بشی
• یه مرجع کامل از تمام مقادیر display و کاربردشون داشته باشی

📦 display در CSS دقیقاً چیه؟

هر عنصر HTML یه مقدار display پیش‌فرض داره که مرورگر خودش تعیین می‌کنه (مثلاً <div> پیش‌فرضش blockه و <span> پیش‌فرضش inline). ولی تو با CSS می‌تونی این رفتار پیش‌فرض رو کامل عوض کنی.

🧱 Block — عنصرهای بلوکی

div {
  display: block;
}

• همیشه یه خط جدید شروع می‌شه (عنصر بعدی مجبوره بره خط پایین)
• به‌طور پیش‌فرض کل عرض والدش رو می‌گیره
• Margin و Padding عمودی کامل و بدون استثنا اثر می‌ذاره

مثال‌های پیش‌فرض Block: <div>, <p>, <h1> تا <h6>, <section>, <ul>, <li>.

➖ Inline — عنصرهای درون‌خطی

span {
  display: inline;
}

<p>این یه متنه با یه <span>کلمه‌ی خاص</span> وسطش.</p>

• خط جدید شروع نمی‌کنه؛ کنار عناصر دیگه، تو جریان متن قرار می‌گیره
• فقط به اندازه‌ی محتواش عرض می‌گیره، نه بیشتر
• width و height روش اصلاً اثر نمی‌ذاره
• Margin و Padding عمودی روش اعمال می‌شه ولی رو چیدمان عناصر بالا/پایین اثر بصری واقعی نداره

مثال‌های پیش‌فرض Inline: <span>, <a>, <strong>, <em>, <img>.

⚡ Inline-block — بهترین هر دو دنیا

.badge {
  display: inline-block;
  width: 100px;
  padding: 10px;
  margin: 5px;
}

• مثل Inline، کنار عناصر دیگه قرار می‌گیره
• مثل Block، width/height و Margin/Padding عمودی کامل روش اثر داره

کاربرد کلاسیک: دکمه‌ها، بج‌ها (Badge)، یا آیتم‌های منویی که باید کنار هم بشینن ولی هرکدوم اندازه‌ی ثابت خودشون رو داشته باشن.

⚠️ نکته‌ی عملی مهم: وقتی چند عنصر inline-block رو تو HTML پشت سر هم می‌نویسی، اگه بینشون فاصله (Enter یا Space) باشه، مرورگر یه فاصله‌ی سفید کوچیک واقعی بینشون می‌ذاره. راه‌حل امروزی‌ش استفاده از Flexbox به‌جای inline-block‌ه.

📊 جدول مقایسه Block، Inline و Inline-block

👻 display: none — حذف کامل از چیدمان

.hidden {
  display: none;
}

همون‌طور که تو جلسه Box Model بررسی کردیم، این مقدار عنصر رو کاملاً از محاسبات Layout حذف می‌کنه — نه دیده می‌شه، نه فضایی می‌گیره.

🧹 flow-root — راه‌حل مدرن یه مشکل قدیمی

.parent {
  border: 2px solid black;
}

.child {
  float: left;
  width: 100px;
  height: 100px;
}

<div class="parent">
  <div class="child"></div>
</div>

مشکل: وقتی همه‌ی فرزندهای یه والد float داشته باشن، والد «فرومی‌پاشه» — ارتفاعش صفر می‌شه، انگار هیچ فرزندی نداره! سال‌ها این مشکل رو با ترفند «Clearfix» حل می‌کردن.

راه‌حل مدرن:

.parent {
  display: flow-root;
}

همین یه خط، بدون هیچ ترفند اضافه، مشکل رو کامل حل می‌کنه.

🔀 سینتکس دو-مقداری display (Display Level 3)

.box {
  display: inline flex;
}

معادل مقدار قدیمی‌تر inline-flexه، ولی خواناتره: «بیرون مثل Inline، داخل مثل Flex Container».

📋 جدول جامع تمام مقادیر Display در CSS

علاوه بر مقادیر پرکاربردی که بالاتر با مثال دیدیم، CSS مقادیر تخصصی‌تر دیگه‌ای هم داره:

برای اکثر پروژه‌های امروزی، فقط ۶-۷ مورد اول این جدول (block, inline, inline-block, none, flow-root, flex, grid) رو زیاد استفاده می‌کنی؛ بقیه بیشتر تو موارد خاص یا پروژه‌های قدیمی‌تر کاربرد دارن.

🧩 و اما Flexbox و Grid…

احتمالاً متوجه شدی که هنوز به display: flex و display: grid عمیق نپرداختیم — کاملاً عمدیه. این دو تا آنقدر قدرتمند و پرکاربردن که هرکدوم لایق یه فصل کامل و مستقل تو این دوره‌ان. فعلاً همین‌قدر بدون: هر دو، والد رو به یه «Container» تبدیل می‌کنن که فرزندهاش رو با قوانین چیدمانی کاملاً جدید کنترل می‌کنه.

🧪 تمرین این جلسه

یه لیست از ۴ تا <div> با کلاس item بساز. با CSS:

• اول همه رو display: block کن و ببین هرکدوم خط جدا می‌گیرن
• بعد به inline-block تغییرشون بده، یه width و margin بهشون بده
• یه <div class="wrapper"> دور یه عنصر float: left بساز؛ اول بدون flow-root ارتفاعش رو چک کن (باید صفر باشه)، بعد display: flow-root اضافه کن و فرقش رو ببین

❓ سوالات متداول

🎯 جمع‌بندی و قدم بعدی

حالا با مهم‌ترین مقادیر display در CSS آشنا شدی: Block، Inline، Inline-block، none، flow-root، مقادیر جدولی، و سینتکس مدرن دو-مقداری. جلسه بعد می‌ریم سراغ Positioning.

جلسه هفتم: آموزش کامل Position در CSS ←

💬 نوبت توئه!

قبل از این جلسه با flow-root آشنا بودی یا همیشه از overflow: hidden یا clearfix استفاده می‌کردی؟ همین پایین برامون بنویس 🚀

شهرام نجفی

شهرام نجفی — بیش از ۱۵ سال طراحی و توسعهٔ وب به‌صورت فریلنس. قالب اختصاصی آوای وب را از صفر نوشته‌ام. مطالب این سایت را بر پایهٔ مستندات رسمی MDN و WHATWG می‌نویسم و قبل از انتشار در مرورگرهای واقعی تست می‌کنم. نمونه‌کارهایم در shahramnajafi.com است.