درس ۷: مدل جعبه

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

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

• محتوا (Content): فضای داخلی که محتوای واقعی در آن قرار می‌گیرد
• پدینگ (Padding): فضای خالی بین محتوا و حاشیه
• حاشیه (Border): خط دور عنصر
• مارژین (Margin): فضای خالی بین عنصر و عناصر مجاور

فرمول محاسبه اندازه:

عرض کل = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

ارتفاع کل = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

CSS ویژگی‌های مختلفی برای کنترل اندازه عناصر ارائه می‌دهد:

ویژگی‌های اصلی:

• width - عرض عنصر
• height - ارتفاع عنصر
• min-width - حداقل عرض
• max-width - حداکثر عرض
• min-height - حداقل ارتفاع
• max-height - حداکثر ارتفاع

مثال‌ها:

.box {
  width: 300px;
  height: 200px;
  min-width: 200px;
  max-width: 500px;
}

پدینگ فضای داخلی بین محتوا و حاشیه عنصر است. این فضا بخشی از عنصر محسوب می‌شود و رنگ پس‌زمینه عنصر را دارد.

ویژگی‌های پدینگ:

• padding-top - پدینگ بالا
• padding-right - پدینگ راست
• padding-bottom - پدینگ پایین
• padding-left - پدینگ چپ
• padding - میانبر برای همه جهات

روش‌های تعریف padding:

/* یک مقدار - همه جهات */
padding: 20px;

/* دو مقدار - بالا/پایین، چپ/راست */
padding: 10px 20px;

/* سه مقدار - بالا، چپ/راست، پایین */
padding: 10px 20px 15px;

/* چهار مقدار - بالا، راست، پایین، چپ */
padding: 10px 15px 20px 25px;

حاشیه خطی است که دور عنصر کشیده می‌شود و بین پدینگ و مارژین قرار دارد.

ویژگی‌های حاشیه:

• border-width - ضخامت حاشیه
• border-style - نوع حاشیه
• border-color - رنگ حاشیه
• border - میانبر برای همه ویژگی‌ها

انواع border-style:

• solid - خط ممتد
• dashed - خط چین
• dotted - خط نقطه‌ای
• double - خط دوتایی
• groove - شیاردار
• ridge - برجسته
• inset - فرورفته
• outset - برآمده

مثال‌ها:

/* روش کامل */
border-width: 2px;
border-style: solid;
border-color: #333;

/* روش میانبر */
border: 2px solid #333;

/* حاشیه برای جهات مختلف */
border-top: 1px solid red;
border-right: 2px dashed blue;

در ادامه، مثالی از مدل جعبه و تأثیر ویژگی‌های مختلف را مشاهده می‌کنید. کد را ویرایش کرده و تغییرات را ببینید:

مارژین فضای خالی بیرون از عنصر است که بین عنصر فعلی و عناصر مجاور قرار می‌گیرد.

ویژگی‌های مارژین:

• margin-top - مارژین بالا
• margin-right - مارژین راست
• margin-bottom - مارژین پایین
• margin-left - مارژین چپ
• margin - میانبر برای همه جهات

مقادیر خاص margin:

• auto - مارژین خودکار (برای وسط‌چین کردن)
• 0 - بدون مارژین
• مقادیر منفی - برای همپوشانی عناصر

وسط‌چین کردن عناصر:

.center {
  width: 300px;
  margin: 0 auto; /* وسط‌چین افقی */
}

ویژگی box-sizing نحوه محاسبه اندازه کل عنصر را تعیین می‌کند:

مقادیر box-sizing:

• content-box (پیش‌فرض): width و height فقط محتوا را شامل می‌شود
• border-box: width و height شامل محتوا، padding و border می‌شود

مثال:

/* content-box */
.box1 {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* عرض کل: 200 + 40 + 10 = 250px */
}

/* border-box */
.box2 {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* عرض کل: 200px */
}

تنظیم سراسری:

* {
  box-sizing: border-box;
}

در برخی موارد، مارژین‌های عمودی عناصر مجاور با هم ترکیب می‌شوند. این پدیده Margin Collapse نامیده می‌شود.

قوانین Margin Collapse:

• فقط مارژین‌های عمودی (top و bottom) collapse می‌شوند
• مارژین‌های افقی (left و right) collapse نمی‌شوند
• بزرگ‌ترین مارژین باقی می‌ماند
• فقط در عناصر block اتفاق می‌افتد

مثال:

.element1 {
  margin-bottom: 30px;
}

.element2 {
  margin-top: 20px;
}

/* فاصله بین عناصر: 30px (نه 50px) */

جلوگیری از Margin Collapse:

• استفاده از padding به جای margin
• اضافه کردن border یا padding به عنصر والد
• استفاده از flexbox یا grid
• تغییر display به inline-block

برای تسلط بیشتر بر مطالب این درس، تمرین‌های زیر را انجام دهید:

تمرین ۱: کارت محصول

کارتی برای نمایش محصول ایجاد کنید که شامل تصویر، عنوان، توضیح و قیمت باشد.

تمرین ۲: باکس‌های مختلف

سه باکس با اندازه‌های مختلف ایجاد کنید و آن‌ها را در یک ردیف قرار دهید.

تمرین ۳: فرم با فاصله‌بندی

فرمی ایجاد کنید که فیلدها فاصله مناسب از هم داشته باشند.

تمرین ۴: مقایسه box-sizing

دو عنصر مشابه ایجاد کنید، یکی با content-box و دیگری با border-box.

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

• از box-sizing: border-box استفاده کنید
• برای وسط‌چین کردن از margin: 0 auto استفاده کنید
• از واحدهای نسبی (em, rem, %) استفاده کنید
• فاصله‌بندی منطقی و سازگار ایجاد کنید
• از ابزارهای توسعه‌دهنده برای بررسی box model استفاده کنید

نکات مهم:

• مارژین‌های منفی امکان همپوشانی عناصر را فراهم می‌کنند
• پدینگ نمی‌تواند منفی باشد
• مارژین‌های عمودی collapse می‌شوند
• border-radius بر روی border اعمال می‌شود
• outline خارج از box model قرار دارد

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

• فراموش کردن box-sizing
• استفاده نادرست از margin برای فاصله داخلی
• عدم درنظرگیری margin collapse
• استفاده از اندازه‌های ثابت برای همه عناصر
• عدم تست در اندازه‌های مختلف صفحه

در درس بعدی با تایپوگرافی و کنترل فونت‌ها در CSS آشنا خواهید شد.