مدل جعبه (Box Model)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

تمامی عناصر HTML را می‌توان به عنوان جعبه‌هایی در نظر گرفت. در CSS، مفهوم مدل جعبه ای (Box Model) زمانی استفاده می‌شود که در مورد layout (به فارسی: چیدمان) صحبت می‌شود.[۱]

مدل جعبه ای در CSS در حقیقت یک جعبه است که اطراف هر عنصر HTML را می‌پوشاند. این جعبه شامل: حاشیه‌ها، کادرها، padding، و محتوای واقعی است. تصویر زیر مدل جعبه ای را نشان می‌دهد:

توضیح بخش‌های مختلف:

  • محتوا - محتوای جعبه، قسمتی که متن و تصاویر ظاهر می‌شوند
  • Padding - ناحیه اطراف محتوا را خالی می‌کند. padding شفاف است
  • Border (کادر) - کادری که در اطراف padding و محتوا قرار می‌گیرد
  • Margin - ناحیه ای خارج از کادر را خالی می‌کند. حاشیه شفاف است

مدل جعبه ای به ما این امکان را می‌دهد که یک کادر در اطراف عناصر اضافه کنیم، و فضاهایی بین عناصر ایجاد کنیم.

مثال

نمایش مدل جعبه ای

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


عرض و ارتفاع یک عنصر

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

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

مثال

عنصر <div> مجموعاً ۳۵۰ پیکسل عرض خواهد داشت.

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


در اینجا نحوه محاسبه وجود دارد:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px


مجموع عرض یک عنصر می‌بایست به صورت زیر محاسبه گردد:

مجموع عرض عنصر = عرض + padding سمت چپ + padding سمت راست + کادر سمت چپ + کادر سمت راست + margin چپ + margin راست

مجموع ارتفاع یک عنصر را می‌بایست به صورت زیر محاسبه کرد:

مجموع ارتفاع عنصر = ارتفاع عنصر + padding بالا + padding پایین + کادر بالا + کادر پایین+ margin بالا + margin

منابع آموزشی