مدل جعبه ای در CSS

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

مدل جعبه‌ای در CSS در واقع یک جعبه است که هر عنصر HTML را در بر می‌گیرد.

هر جعبه از چهار بخش تشکیل شده است:

1. محتوا (Content) — ناحیه‌ای که متن و تصاویر در آن نمایش داده می‌شوند

2. فاصله داخلی (Padding) — فضای شفاف اطراف محتوا

3. مرز (Border) — خطی که دور محتوا و فاصله داخلی کشیده می‌شود

4. فاصله بیرونی (Margin) — فضای شفاف خارج از مرز عنصر

این مدل به ما اجازه می‌دهد تا برای عناصر مرز تعریف کنیم و فضای بین آن‌ها را مشخص نماییم.

مثال: نمایش مدل جعبه‌ای

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

در این مثال، عنصر <div> دارای عرض ۳۰۰ پیکسل، مرز سبز به ضخامت ۱۵ پیکسل، فاصله داخلی ۵۰ پیکسل و فاصله بیرونی ۲۰ پیکسل است.

عرض و ارتفاع عناصر در مدل جعبه‌ای

برای اینکه بتوانید عرض و ارتفاع عناصر را به‌درستی در همه مرورگرها تنظیم کنید، باید با نحوه عملکرد مدل جعبه‌ای آشنا باشید.

 نکته مهم: زمانی که با CSS ویژگی‌های width و height را تنظیم می‌کنید، فقط ناحیه محتوای عنصر را مشخص می‌کنید. برای محاسبه‌ی اندازه واقعی عنصر، باید فاصله داخلی (padding) و مرز (border) را نیز در نظر بگیرید.

مثال: محاسبه عرض و ارتفاع واقعی یک عنصر

div {
  width: 320px;
  height: 50px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

محاسبه عرض واقعی:

• ۳۲۰ پیکسل (عرض ناحیه محتوا)

• ۲۰ پیکسل (۱۰ پیکسل padding سمت چپ + ۱۰ پیکسل padding سمت راست)

• ۱۰ پیکسل (۵ پیکسل border سمت چپ + ۵ پیکسل border سمت راست) = ۳۵۰ پیکسل (عرض کل عنصر)

محاسبه ارتفاع واقعی:

• ۵۰ پیکسل (ارتفاع ناحیه محتوا)

• ۲۰ پیکسل (۱۰ پیکسل padding بالا + ۱۰ پیکسل padding پایین)

• ۱۰ پیکسل (۵ پیکسل border بالا + ۵ پیکسل border پایین) = ۸۰ پیکسل (ارتفاع کل عنصر)

فرمول‌های محاسبه اندازه واقعی عنصر

• عرض کل عنصر = width + padding-left + padding-right + border-left + border-right

• ارتفاع کل عنصر = height + padding-top + padding-bottom + border-top + border-bottom

 توجه: ویژگی margin نیز بر فضای کلی‌ای که عنصر در صفحه اشغال می‌کند تأثیر دارد، اما در محاسبه اندازه واقعی جعبه لحاظ نمی‌شود. اندازه واقعی عنصر تا انتهای مرز (border) محاسبه می‌شود.