box model یکی از مفاهیم پایه‌ای در CSS است که نحوه نمایش و چیدمان عناصر را در صفحه وب تعیین می‌کند. هر عنصر در صفحه به صورت یک جعبه (box) نمایش داده می‌شود که از چهار بخش اصلی تشکیل شده است: محتوا (content)، حاشیه داخلی (padding)، حاشیه (border) و حاشیه خارجی (margin).
ابزارهای توسعه‌دهنده مرورگر (DevTools) امکانات قدرتمندی برای بررسی و دیباگ box model ارائه می‌دهند. این ابزارها به شما کمک می‌کنند تا مقادیر padding، border و margin را به صورت بصری مشاهده کرده و مشکلات مربوط به چیدمان عناصر را شناسایی کنید.
کاربردهای عملی بررسی box model
بررسی box model در مرورگر برای موارد زیر مفید است:
- شناسایی مشکلات چیدمان و فاصله‌گذاری بین عناصر
- مشاهده مقادیر دقیق padding، border و margin
- درک نحوه محاسبه عرض و ارتفاع نهایی عناصر
- اشکال‌زدایی مشکلات مربوط به همپوشانی عناصر
- بهینه‌سازی فاصله‌ها و اندازه‌های عناصر در طراحی ریسپانسیو
نمونه کدهای مرتبط
در ادامه چند مثال از کدهای CSS که box model را تعریف می‌کنند آورده شده است:
مثال ۱: تعریف ساده box model
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
margin: 10px;
}مثال ۲: استفاده از box-sizing
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid #333;
}'
مثال ۳: margin منفی
.box {
margin: -10px;
padding: 15px;
border: 2px dashed #999;
}خلاصه درس
- در اکثر مرورگرها می‌توانید با راست کلیک روی عنصر و انتخاب Inspect یا فشار دادن F12 ابزارهای توسعه‌دهنده را باز کنید
- در تب Elements یا Inspector می‌توانید عنصر مورد نظر را انتخاب کنید
- بخش Computed یا Box Model نمایش گرافیکی از box model را نشان می‌دهد
- می‌توانید مقادیر padding، margin و border را مستقیماً در ابزارهای توسعه‌دهنده ویرایش کنید
- تغییرات انجام شده در ابزارهای توسعه‌دهنده موقت هستند و در فایل‌های اصلی ذخیره نمی‌شوند
با استفاده از این ابزارها می‌توانید به سرعت مشکلات مربوط به box model را شناسایی و اصلاح کنید. این روش به خصوص هنگام کار با طرح‌بندی‌های پیچیده و طراحی‌های ریسپانسیو بسیار مفید است.
