CSS – مدل جعبه‌ای (Box Model)

تمامی عناصر HTML می‌توانند به عنوان جعبه‌هایی در نظر گرفته شوند.

مدل جعبه‌ای CSS چیست؟

در CSS، اصطلاح “مدل جعبه‌ای” زمانی استفاده می‌شود که درباره طراحی و چیدمان عناصر صحبت می‌کنیم. مدل جعبه‌ای CSS شامل چهار بخش است: محتوا، پدینگ، حاشیه و مرز.

اجزای مدل جعبه‌ای:

  1. محتوا (Content): محتوای واقعی عنصر که متن و تصاویر را شامل می‌شود.
  2. پدینگ (Padding): فضایی شفاف که اطراف محتوا قرار می‌گیرد.
  3. مرز (Border): خطی که دور پدینگ و محتوا کشیده می‌شود.
  4. حاشیه (Margin): فضایی شفاف خارج از مرز که از دیگر عناصر فاصله ایجاد می‌کند.

مدل جعبه‌ای CSS به ما اجازه می‌دهد تا مرزی اطراف عناصر اضافه کرده و فضای بین عناصر مختلف را تعریف کنیم.

مثال:

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

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

برای تنظیم درست عرض و ارتفاع عناصر در همه مرورگرها، باید مدل جعبه‌ای را در نظر بگیرید. زمانی که خواص width و height را در CSS تنظیم می‌کنید، فقط برای ناحیه محتوای عنصر تنظیم می‌شوند.

برای محاسبه عرض و ارتفاع کلی یک عنصر، باید پدینگ و مرز را نیز در نظر بگیرید.

مثال:

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

محاسبه عرض و ارتفاع کلی:

  • عرض کل:
    • 320px (عرض محتوا)
    • 20px (پدینگ چپ و راست)
    • 10px (مرز چپ و راست) = 350px (عرض کلی)
  • ارتفاع کل:
    • 50px (ارتفاع محتوا)
    • 20px (پدینگ بالا و پایین)
    • 10px (مرز بالا و پایین) = 80px (ارتفاع کلی)

نکته:

مقدار خاصیت margin نیز فضای کلی‌ای که جعبه اشغال می‌کند را تحت تأثیر قرار می‌دهد، اما در محاسبه اندازه واقعی جعبه لحاظ نمی‌شود. مرز نقطه‌ای است که اندازه جعبه پایان می‌یابد.

نکته:

مقدار خاصیت margin نیز فضای کلی‌ای که جعبه اشغال می‌کند را تحت تأثیر قرار می‌دهد، اما در محاسبه اندازه واقعی جعبه لحاظ نمی‌شود. مرز نقطه‌ای است که اندازه جعبه پایان می‌یابد.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.