مدل جعبه (به انگلیسی: Box Model)
تمامی عناصر HTML را میتوان به عنوان جعبههایی در نظر گرفت. در CSS، مفهوم مدل جعبه ای (به انگلیسی: Box Model) زمانی استفاده میشود که در مورد layout (به فارسی: چیدمان) صحبت میشود.[۱]
مدل جعبه ای در CSS در حقیقت یک جعبه است که اطراف هر عنصر HTML را میپوشاند. این جعبه شامل: حاشیهها، کادرها، padding، و محتوای واقعی است. تصویر زیر مدل جعبه ای را نشان میدهد:
توضیح بخشهای مختلف:
- محتوا - محتوای جعبه، قسمتی که متن و تصاویر ظاهر میشوند
- Padding - ناحیه اطراف محتوا را خالی میکند. padding شفاف است
- Border (کادر) - کادری که در اطراف padding و محتوا قرار میگیرد
- Margin - ناحیه ای خارج از کادر را خالی میکند. حاشیه شفاف است
مدل جعبه ای به ما این امکان را میدهد که یک کادر در اطراف عناصر اضافه کنیم، و فضاهایی بین عناصر ایجاد کنیم.
مثال
نمایش مدل جعبه ای
عرض و ارتفاع یک عنصر
برای تنظیم صحیح عرض و ارتفاع یک عنصر در تمامی مرورگرها، باید بدانید مدل جعبه ای چگونه کار میکند.
مهم: زمانی که ویژگی عرض (به انگلیسی: width) و ارتفاع (به انگلیسی: height) یک عنصر را به وسیله CSS مشخص میکنید، فقط عرض و ارتفاع ناحیه محتوا را مشخص میکنید. برای محاسبه سایز کامل یک عنصر، همچنین میبایست اندازههای padding و کادرها (به انگلیسی: border) و حاشیهها را اضافه کنید.
مثال
عنصر <div> مجموعاً ۳۵۰ پیکسل عرض خواهد داشت.
در اینجا نحوه محاسبه وجود دارد:
مجموع عرض یک عنصر میبایست به صورت زیر محاسبه گردد:
- مجموع عرض عنصر = عرض + padding سمت چپ + padding سمت راست + کادر سمت چپ + کادر سمت راست + margin چپ + margin راست
مجموع ارتفاع یک عنصر را میبایست به صورت زیر محاسبه کرد:
- مجموع ارتفاع عنصر = ارتفاع عنصر + padding بالا + padding پایین + کادر بالا + کادر پایین+ margin بالا + margin
خودتان را با تمرینها امتحان کنید!
منابع آموزشی