مدل جعبه (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

« صفحهٔ قبل

صفحهٔ بعد »