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

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های 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

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

صفحهٔ بعد»

«صفحهٔ قبل