نمایش بصری Box Model؛ دیدن دقیق چیزی که فقط حدسش می‌زدید

تو درس قبل، به‌طور مختصر به نمودار جعبه‌ای پایین پنل Styles اشاره کردیم. حالا وقتشه یه درس مستقل بهش اختصاص بدیم، چون Box Model Visualization احتمالاً پرکاربردترین ابزار DevTools برای حل مشکلات چیدمانیه؛ همون مشکلاتی که تو فصل ۴ (Box Model) به‌صورت تئوری دیدیم، اینجا به‌صورت زنده و قابل‌اندازه‌گیری قابل بررسی‌ان.

نمودار جعبه‌ای دقیقاً چی نشون می‌ده؟

این نمودار، چهار لایه‌ی تودرتوی box model رو با رنگ‌های متفاوت (معمولاً آبی برای content، سبز برای padding، زرد/نارنجی برای border، و نارنجی/قهوه‌ای برای margin) به همراه عدد دقیق هر کدوم نشون می‌ده:

.card {
  width: 300px;
  padding: 16px;
  border: 2px solid #333;
  margin: 24px;
}

وقتی این المنت رو انتخاب کنید، نمودار دقیقاً نشون می‌ده content واقعاً 300pxه (یا اگه box-sizing: border-box باشه، کمتر)، padding دور تا دورش 16px، border 2px، و margin 24px فاصله گرفته. دیگه نیازی نیست این اعداد رو تو ذهنتون جمع بزنید.

چرا این نمودار برای box-sizing حیاتیه

تو فصل ۴ دیدیم که box-sizing: content-box (پیش‌فرض) باعث می‌شه padding و border به عرض تعریف‌شده اضافه بشن، در حالی که border-box همه‌چیز رو داخل همون عرض جا می‌ده. این فرق، تو نمودار box model کاملاً قابل مشاهده‌ست:

/* content-box: عرض واقعی = 300 + 32 (padding) + 4 (border) = 336px */
.box-a {
  box-sizing: content-box;
  width: 300px;
  padding: 16px;
  border: 2px solid black;
}

/* border-box: عرض واقعی = دقیقاً 300px */
.box-b {
  box-sizing: border-box;
  width: 300px;
  padding: 16px;
  border: 2px solid black;
}

اگه یه المنت رو صفحه اندازه‌ی غیرمنتظره‌ای داره و مطمئن نیستید مشکل از کجاست، اولین قدم همیشه بازکردن نمودار box model و چک کردن مقدار box-sizing باید باشه؛ خیلی از باگ‌های چیدمانی دقیقاً همینجا حل می‌شن.

Margin منفی و Margin Collapse: دیدن چیزی که تو کد نامرئیه

تو فصل ۴ با پدیده‌ی margin collapse آشنا شدیم (وقتی margin عمودی دو المنت مجاور، به‌جای جمع شدن، فقط بزرگ‌ترینشون اعمال می‌شه). این پدیده تو خود کد اصلاً معلوم نیست، ولی تو نمودار box model، وقتی دو المنت پشت سر هم رو با هم مقایسه کنید، می‌تونید فاصله‌ی واقعی نهایی بینشون رو ببینید و بفهمید آیا collapse اتفاق افتاده یا نه:

.paragraph-1 {
  margin-bottom: 20px;
}
.paragraph-2 {
  margin-top: 30px;
}
/* فاصله‌ی نهایی بین این دو پاراگراف، 50px نیست؛ فقط 30px (بزرگ‌تری) هست */

با انتخاب هر کدوم از این دو پاراگراف و دیدن نمودارشون، یا حتی بهتر، استفاده از ابزار «Layout» که بعداً بهش می‌رسیم، می‌تونید مستقیم فاصله‌ی واقعی رو اندازه بگیرید به‌جای این‌که فرض کنید جمع دو margin چیه.

هایلایت کردن زنده‌ی هر لایه با hover

یه قابلیت خیلی کاربردی: وقتی موس رو رو هر بخش از نمودار box model (مثلاً رو بخش padding) نگه دارید، همون بخش دقیقاً رو خود صفحه‌ی وب هم با یه رنگ نیمه‌شفاف هایلایت می‌شه. این کمک می‌کنه بفهمید دقیقاً کدوم فاصله‌ی بصری رو صفحه، معادل کدوم بخش از box model هست؛ خصوصاً وقتی چند لایه از padding و margin تو ساختارهای تودرتو باعث سردرگمی شدن.

مقادیر منفی و Overflow: چیزهایی که از جعبه بیرون می‌زنن

گاهی یه المنت با margin منفی یا یه محتوای بزرگ‌تر از جعبه‌ی خودش، از مرزهای معمولی بیرون می‌زنه. نمودار box model این موارد رو هم نشون می‌ده، ولی گاهی برای دیدن دقیق‌ترش باید سراغ ابزار Layout (که DevTools مرورگرهای مدرن دارن) برید که مستقیم رو صفحه‌ی وب، خطوط راهنما و اندازه‌ها رو به‌صورت overlay نشون می‌ده، نه فقط تو یه نمودار جدا تو پنل.

ابزار Layout / Grid و Flexbox Overlay

مکمل مهم نمودار box model، ابزارهای overlay مخصوص Grid و Flexbox هستن که تو مرورگرهای مدرن اضافه شدن. وقتی یه المنت با display: grid یا display: flex رو انتخاب کنید، معمولاً یه آیکون کوچیک کنار همون خط تو پنل Styles ظاهر می‌شه که با کلیک روش، خطوط شبکه یا محورهای flex مستقیم رو صفحه‌ی وب رسم می‌شن:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

با فعال کردن این overlay، دقیقاً می‌بینید هر ستون از کجا تا کجاست، gap واقعی چقدره، و کدوم آیتم تو کدوم سلول قرار گرفته؛ چیزی که تو فصل‌های Grid و Flexbox این دوره فقط تئوری دیدیمش، اینجا کاملاً بصری و قابل‌اندازه‌گیری می‌شه.

نکته مهم: این overlay ها معمولاً رنگ‌بندی قابل‌تنظیمی دارن (تو Chrome، کنار آیکون grid/flex یه تنظیمات رنگ هست)؛ اگه چند grid تو صفحه هم‌زمان فعال کنید، تغییر رنگ هرکدوم کمک می‌کنه گیج نشید که کدوم خط مال کدوم container ه.

Ruler و اندازه‌گیری فاصله‌ی بین دو المنت دلخواه

بعضی مرورگرها یه حالت اندازه‌گیری دارن که اجازه می‌ده بین دو نقطه‌ی دلخواه رو صفحه (نه فقط داخل box model یه المنت) فاصله رو اندازه بگیرید؛ این برای چک کردن این‌که آیا فاصله‌ی بصری بین دو کامپوننت کاملاً مطابق طراحیه یا نه (مثلاً مقایسه با یه فایل Figma) خیلی کاربردیه.

اشتباه رایج: نادیده گرفتن تفاوت اندازه‌ی «نمایش‌داده‌شده» با «تعریف‌شده»

یه اشتباه رایج اینه که فرض کنید عددی که تو نمودار box model می‌بینید، همون چیزیه که تو فایل CSS نوشتید. ولی اگه یه ویژگی دیگه (مثل min-width یا محتوای سرریز) روی اندازه‌ی نهایی اثر گذاشته باشه، عدد نمایش‌داده‌شده می‌تونه کاملاً متفاوت از مقدار تعریف‌شده تو CSS باشه. همیشه پنل Computed رو هم کنار نمودار box model چک کنید تا مطمئن بشید کدوم ویژگی دقیقاً مسئول اون عدد نهاییه.

جمع‌بندی

نمودار box model، لایه‌های content، padding، border و margin رو با عدد دقیق و رنگ‌بندی جدا نشون می‌ده و برای دیباگ کردن box-sizing، margin collapse و اندازه‌های غیرمنتظره ابزار اصلیه. ابزارهای overlay مخصوص Grid و Flexbox، همین دقت رو برای چیدمان‌های پیچیده‌تر فراهم می‌کنن. هایلایت زنده‌ی هر بخش با hover و امکان اندازه‌گیری دستی فاصله‌ها، فهمیدن یه چیدمان پیچیده رو از حدس زدن به یه فرآیند دقیق و قابل‌اندازه‌گیری تبدیل می‌کنه.