مدل جعبه (به انگلیسی: Box Model)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

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

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

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

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

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

مثال

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

1 div {
2   width: 300px;
3   border: 15px solid green;
4   padding: 50px;
5   margin: 20px;
6 }


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

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

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

مثال

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

1 div {
2   width: 320px;
3   padding: 10px;
4   border: 5px solid gray;
5   margin: 0;
6 }


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

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

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

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

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

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

خودتان را با تمرین‌ها امتحان کنید!


منابع آموزشی