سه حالت حیاتی عناصر: چطور آنها را کنار هم بچینیم؟

Display: انواع نمایش عناصر در صفحه! 🖥️

سلام به همه! امروز می‌خوایم در مورد یکی از مهم‌ترین خصوصیت‌های CSS صحبت کنیم: `display`. این خصوصیت تعیین می‌کنه که یه عنصر چطور در صفحه نمایش داده بشه و چه رفتاری داشته باشه. سه نوع اصلی `display` که باید بدونیم، block، inline و inline-block هستن. آماده‌اید تا این مفاهیم رو با هم باز کنیم؟ بزن بریم! 🚀

1. `display: block` 🧱

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

• عرض و ارتفاعشون رو می‌شه تعیین کرد (width, height).
• margin و padding در هر چهار طرفشون اعمال می‌شه.
• عناصر block همیشه یه خط جدید ایجاد می‌کنن.

مثال‌هایی از عناصر block به طور پیش‌فرض: <div>, <h1> تا <h6>, <p>, <ul>, <ol>, <li>, <table>, <form>.

.my-block-element {
  display: block; /* این رفتار پیش‌فرض div هاست */
  width: 50%; /* عرض رو می‌شه تعیین کرد */
  height: 100px; /* ارتفاع رو هم می‌شه تعیین کرد */
  background-color: lightblue;
  margin-bottom: 10px; /* فضای زیرش */
  padding: 10px;
}

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

2. `display: inline` ✒️

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

• عرض و ارتفاعشون رو نمی‌شه تعیین کرد (width, height).
• margin و padding در جهت افقی (چپ و راست) اعمال می‌شه، اما در جهت عمودی (بالا و پایین) فقط روی متن تاثیر می‌ذاره و فضای اطراف عنصر رو زیاد نمی‌کنه.
• عناصر inline خط جدید ایجاد نمی‌کنن.

مثال‌هایی از عناصر inline به طور پیش‌فرض: <span>, <a>, <strong>, <em>, <img> (البته `img` یه مورد خاصه که گاهی مثل block رفتار می‌کنه).

.my-inline-element {
  display: inline; /* این رفتار پیش‌فرض span هاست */
  background-color: lightgreen;
  padding: 5px; /* padding افقی اعمال می‌شه، عمودی هم اعمال می‌شه ولی فاصله اضافه نمی‌کنه */
  margin: 5px; /* margin افقی اعمال می‌شه، عمودی اعمال نمی‌شه */
}

.inline-text {
  font-size: 1.2em;
  color: #333;
}

عناصر inline مثل کلماتی هستن که در کنار هم توی یه جمله قرار می‌گیرن.

3. `display: inline-block` 🍱

این نوع نمایش، یه ترکیب عالی از دو نوع قبلیه! عناصر inline-block مثل عناصر inline در کنار هم قرار می‌گیرن، اما مثل عناصر block می‌تونیم براشون عرض و ارتفاع تعیین کنیم و margin و padding در هر چهار طرفشون به درستی اعمال می‌شه.

• در کنار عناصر دیگه نمایش داده می‌شن (مثل inline).
• عرض و ارتفاعشون رو می‌شه تعیین کرد (مثل block).
• margin و padding در هر چهار طرفشون اعمال می‌شه (مثل block).

.my-inline-block-element {
  display: inline-block; /* ترکیب هوشمندانه */
  width: 150px;
  height: 80px;
  background-color: lightcoral;
  margin: 15px; /* margin در هر چهار جهت اعمال می‌شه */
  padding: 10px;
  text-align: center; /* برای وسط چین کردن متن داخلش */
}

.container-for-inline-blocks {
  white-space: nowrap; /* برای جلوگیری از رفتن به خط بعد اگه جا نباشه */
}

inline-block خیلی کاربردیه، مخصوصاً وقتی می‌خواین چند تا جعبه یا کارت رو کنار هم بچینین و در عین حال کنترل کامل روی ابعادشون داشته باشین.

4. کاربردهای عملی و نکات مهم! 🤔

* **برای ساخت منوهای ناوبری:** معمولاً آیتم‌های منو (که اغلب `

/* مثالی برای نمایش منو */
.nav-menu li {
  display: inline-block;
  margin: 0 15px;
}

.nav-menu li a {
  text-decoration: none;
  color: #333;
  padding: 10px;
}

/* مثالی برای مخفی کردن عنصر */
.hidden-element {
  display: none;
}