Box Model در CSS یکی از مهم‌ترین مفاهیم در طراحی وب است که نحوه اندازه‌گیری و نمایش عناصر HTML را مشخص می‌کند.

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

۱. Box Model در CSS چیست؟

در Box Model، هر عنصر در صفحه از چهار بخش تشکیل شده است:

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

🔹 ساختار Box Model:

┌──────────────────────┐
│       Margin        │  (حاشیه بیرونی)
│ ┌──────────────────┐ │
│ │      Border      │ │  (حاشیه مرزی)
│ │ ┌──────────────┐ │ │
│ │ │   Padding    │ │ │  (حاشیه داخلی)
│ │ │ ┌──────────┐ │ │ │
│ │ │ │ Content  │ │ │ │  (محتوا)
│ │ │ └──────────┘ │ │ │
│ │ └──────────────┘ │ │
│ └──────────────────┘ │
└──────────────────────┘

۲. اجزای اصلی Box Model در CSS

✅ ۱. محتوا (Content)

بخشی از جعبه که شامل متن، تصویر یا سایر محتواهای HTML است.

.box {
    width: 200px;
    height: 100px;
}

🔹 در این مثال، اندازه محتوا ۲۰۰ پیکسل عرض و ۱۰۰ پیکسل ارتفاع دارد.

✅ ۲. حاشیه داخلی (Padding)

فاصله بین محتوا و حاشیه مرزی (Border).

.box {
    padding: 20px;
}

🔹 این مقدار باعث می‌شود که ۲۰ پیکسل فاصله بین محتوا و Border ایجاد شود.

✅ ۳. حاشیه مرزی (Border)

حاشیه‌ای که اطراف Padding و محتوا قرار دارد.

.box {
    border: 5px solid black;
}

🔹 این کد باعث می‌شود یک حاشیه ۵ پیکسلی مشکی در اطراف جعبه ایجاد شود.

✅ ۴. حاشیه بیرونی (Margin)

فاصله بین عنصر و سایر عناصر صفحه.

.box {
    margin: 30px;
}

🔹 این مقدار باعث می‌شود ۳۰ پیکسل فاصله بین عنصر و عناصر دیگر ایجاد شود.

۳. نحوه تأثیر Box Model بر اندازه نهایی عناصر

به‌صورت پیش‌فرض، مقدار width و height فقط شامل Content می‌شود، نه Padding و Border.

مثال:

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
}

🔹 اندازه واقعی عنصر محاسبه می‌شود به صورت:

عرض نهایی = width + padding + border
         = 200 + (10 * 2) + (5 * 2)
         = 230px

ارتفاع نهایی = height + padding + border
            = 100 + (10 * 2) + (5 * 2)
            = 130px

🎯 راه‌حل برای کنترل بهتر اندازه: استفاده از box-sizing: border-box;

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
    box-sizing: border-box;
}

🔹 با این تنظیمات، مقدار width و height شامل Padding و Border خواهد شد و اندازه عنصر دقیقاً ۲۰۰×۱۰۰ پیکسل باقی می‌ماند.

۴. کاربردهای Box Model در طراحی وب

✅ کنترل دقیق چیدمان عناصر – جلوگیری از تغییر ناخواسته اندازه عناصر.
✅ ایجاد فاصله و فاصله‌گذاری بهتر بین المان‌ها – تنظیم margin و padding برای فاصله‌ها.
✅ بهینه‌سازی برای طراحی ریسپانسیو – تنظیم اندازه‌ها برای موبایل و دسکتاپ.
✅ استفاده در طراحی‌های مدرن CSS مانند Flexbox و Grid.

۵. نتیجه‌گیری

Box Model یکی از اصولی‌ترین مفاهیم در CSS است که ساختار و اندازه عناصر را تعیین می‌کند. آشنایی با این مدل به بهینه‌سازی چیدمان، کنترل فاصله‌ها و ایجاد طراحی‌های دقیق‌تر و کارآمدتر در صفحات وب کمک می‌کند.