آموزش جامع مدل جعبه‌ای در CSS

🎯 اهداف یادگیری

• درک کامل مفهوم مدل جعبه‌ای در CSS
• آشنایی با تمام اجزای مدل جعبه‌ای
• توانایی تنظیم padding, margin, border و content
• کار با box-sizing و تفاوت border-box با content-box

📌 مدل جعبه‌ای چیست؟

در CSS، هر عنصری در صفحه به صورت یک جعبه مستطیل شکل نمایش داده می‌شود. مدل جعبه‌ای (Box Model) نحوه محاسبه اندازه و فضای این جعبه‌ها را تعریف می‌کند:

div {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 10px solid #333;
  margin: 30px;
}

اجزای اصلی مدل جعبه‌ای:

• محتوای (Content): متن، تصاویر یا سایر عناصر داخل جعبه
• حاشیه داخلی (Padding): فضای خالی بین محتوا و border
• حاشیه (Border): خطی که دور padding و content کشیده می‌شود
• حاشیه خارجی (Margin): فضای خالی بین border و عناصر مجاور

📌 نحوه محاسبه اندازه کل جعبه

در مدل استاندارد CSS، width و height فقط اندازه محتوا را تعیین می‌کنند:

/* عرض کل = width + padding-left + padding-right + border-left + border-right */
/* ارتفاع کل = height + padding-top + padding-bottom + border-top + border-bottom */
/* در مثال بالا: */
/* عرض کل = 300 + 20 + 20 + 10 + 10 = 360px */
/* ارتفاع کل = 200 + 20 + 20 + 10 + 10 = 260px */

box-sizing: border-box

برای ساده‌تر کردن محاسبات می‌توان از border-box استفاده کرد:

div {
  box-sizing: border-box;
  width: 300px; /* حالا 300px شامل padding و border هم می‌شود */
}

تفاوت content-box و border-box:

📌 تنظیم padding و margin

می‌توانید padding و margin را به چهار روش مختلف تنظیم کنید:

/* روش 1: یک مقدار برای تمام جهات */
padding: 10px;
/* روش 2: عمودی | افقی */
padding: 10px 20px;
/* روش 3: بالا | چپ و راست | پایین */
padding: 10px 20px 15px;
/* روش 4: بالا | راست | پایین | چپ (به جهت عقربه‌های ساعت) */
padding: 10px 20px 15px 5px;

تنظیم جداگانه هر طرف:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 5px;

📌 کار با border

border سه ویژگی اصلی دارد: width, style و color

div {
  /* روش مختصرنویسی */
  border: 2px solid #ff0000;
  /* روش تفکیک شده */
  border-width: 2px;
  border-style: solid;
  border-color: #ff0000;
}

انواع border-style:

• solid: خط پیوسته
• dotted: خط نقطه‌ای
• dashed: خط چین
• double: خط دوتایی
• groove, ridge, inset, outset: حالت‌های سه‌بعدی

border-radius برای گوشه‌های گرد:

div {
  border-radius: 10px; /* تمام گوشه‌ها */
  border-radius: 10px 20px; /* بالا-چپ و پایین-راست | بالا-راست و پایین-چپ */
  border-radius: 5px 10px 15px 20px; /* بالا-چپ | بالا-راست | پایین-راست | پایین-چپ */
  border-top-left-radius: 10px; /* تنظیم جداگانه هر گوشه */
}

📌 تمرین عملی

یک کارت (card) با مشخصات زیر ایجاد کنید:

/* ویژگی‌های مورد نیاز: */
/* - عرض: 250px */
/* - ارتفاع: 350px */
/* - padding: 20px از بالا و پایین، 15px از چپ و راست */
/* - margin: 30px از بالا و پایین، auto از چپ و راست */
/* - border: 2px solid با رنگ #ddd */
/* - border-radius: 8px برای تمام گوشه‌ها */
/* - box-sizing: border-box */

راهنمای تمرین:

1. یک div با کلاس card ایجاد کنید
2. ویژگی‌های بالا را برای آن اعمال کنید
3. مطمئن شوید محاسبه اندازه کل درست است
4. می‌توانید محتوای دلخواه داخل کارت اضافه کنید

📌 نکات پیشرفته

برخی تکنیک‌های حرفه‌ای کار با مدل جعبه‌ای:

۱. استفاده از margin: auto برای居中 کردن

.center-box {
  width: 80%;
  margin: 0 auto; /*居中 کردن افقی*/
}

۲. Collapsing Margins

وقتی margin دو عنصر عمودی به هم می‌رسند، به جای جمع شدن، بزرگ‌ترین margin اعمال می‌شود:

.box1 { margin-bottom: 30px; }
.box2 { margin-top: 20px; }
/* فاصله بین دو جعبه 30px خواهد بود نه 50px */

۳. استفاده از calc() برای محاسبات

.responsive-box {
  width: calc(100% - 40px); /* همیشه 40px کمتر از والد */
}

📌 قدم بعدی

در درس بعدی با Flexbox در CSS آشنا خواهیم شد!