فهرست مطالب
وقتی به یک دکمه یا کارت در صفحه عرض ۲۰۰ پیکسل می‌دهید و سپس کمی فاصله‌ی درونی یا خط دور به آن اضافه می‌کنید، انتظار دارید اندازه‌ی کل ثابت بماند. با این حال جعبه بزرگ‌تر می‌شود، دکمه از ردیف بیرون می‌زند یا اسکرول افقی ناخواسته در صفحه پدیدار می‌شود. ریشه‌ی این رفتار گیج‌کننده در مفهومی بنیادین به نام «مدل جعبه‌ای» یا همان Box Model نهفته است.
مرورگر با هر عنصر در ساختار صفحه مانند یک جعبه‌ی مستطیلی رفتار می‌کند. اگر سازوکار محاسبه‌ی این جعبه‌ها را دقیق نشناسید، چینش بخش‌های ساده‌ی رابط کاربری هم تبدیل به چالشی زمان‌بر می‌شود.
چهار لایه‌ی تشکیل‌دهنده‌ی هر عنصر در وب
طبق مستندات رسمی وب در MDN، هر جعبه در صفحه‌آرایی از چهار لایه‌ی متوالی تشکیل می‌شود که از درون به بیرون چیده شده‌اند:
۱. محتوا (Content): هسته‌ی مرکزی جعبه است که متن، تصویر یا عناصر فرزند را درون خود جای می‌دهد. ابعاد آن با width و height مشخص می‌شود.
۲. فاصله‌ی درونی (Padding): فضای خالی میان لبه‌ی محتوا و خط کادر است. این فاصله شفاف است اما رنگ پس‌زمینه‌ی عنصر به زیر آن هم گسترش پیدا می‌کند.
۳. خط دور (Border): خط حاشیه‌ای که دور فاصله‌ی درونی کشیده می‌شود. ضخامت، جنس و رنگ مشخصی دارد.
۴. فاصله‌ی بیرونی (Margin): فضای بیرونی جعبه که آن را از سایر جعبه‌های مجاور جدا می‌کند. مارجین کاملاً شفاف است و فضای تنفس میان المان‌ها را می‌سازد.
مقایسه‌ی رفتار پیش‌فرض و رفتار کنترلی جعبه
به‌طور پیش‌فرض در CSS، خاصیتی به نام box-sizing با مقدار content-box فعال است. در این حالت، وقتی به جعبه‌ای عرض ۲۰۰ پیکسل اختصاص می‌دهید، این عدد فقط به لایه‌ی محتوا اعمال می‌شود. اگر ۲۰ پیکسل پدینگ و ۵ پیکسل بوردر به هر طرف اضافه کنید، پهنای واقعی عنصر روی صفحه چنین محاسبه می‌شود:
۲۰۰ + ۲۰ + ۲۰ + ۵ + ۵ = ۲۵۰ پیکسل
این رفتار باعث سردرگمی طراحان می‌شود، زیرا برای رسیدن به پهنای ۲۰۰ پیکسل نهایی، مجبور می‌شوید خودتان دستی محاسبات ریاضی انجام دهید و عرض محتوا را کم کنید. راهکار استاندارد و حرفه‌ای، تغییر مقدار این خاصیت به border-box است. در حالت border-box، عددی که برای عرض تعیین می‌کنید کل فضای محتوا، پدینگ و بوردر را در بر می‌گیرد و مرورگر خودش عرض محتوا را کوچک‌تر می‌کند تا اندازه‌ی کلی از ۲۰۰ پیکسل تجاوز نکند.
یک نمونه‌ی عملی از رفتار جعبه‌ها
کد زیر دو جعبه با عرض ظاهری یکسان را در کنار هم نمایش می‌دهد تا تفاوت اثرگذاری این دو مدل را در عمل ببینید:
html<div class="box standard-box">
جعبه‌ی استاندارد
</div>
<div class="box modern-box">
جعبه‌ی بوردر باکس
</div>
css/* استایل‌های پایه برای هر دو عنصر */
.box {
width: 200px;
height: 80px;
padding: 20px;
border: 5px solid #2563eb;
background-color: #dbeafe;
margin-bottom: 16px;
}
/* رفتار پیش‌فرض مرورگر */
.standard-box {
box-sizing: content-box;
/* عرض واقعی روی صفحه: ۲۵۰ پیکسل */
}
/* رفتار کنترل‌شده و خوانا */
.modern-box {
box-sizing: border-box;
/* عرض واقعی روی صفحه: دقیقاً ۲۰۰ پیکسل */
}
در خروجی این قطعه‌کد، جعبه‌ی اول ۵۰ پیکسل از جعبه‌ی دوم پهن‌تر و بلندتر به چشم می‌آید، در حالی که هر دو از ویژگی width: 200px استفاده کرده‌اند.
اشتباه رایج در طراحی قالب‌ها
بزرگ‌ترین خطای افراد در شروع کار با فرانت‌اند، تنظیم جداگانه‌ی box-sizing روی تک‌تک کلاس‌ها است. این کار کد را شلوغ می‌کند و احتمال خطای محاسباتی را در بخش‌های پیچیده بالا می‌برد.
رویکرد استاندارد در پروژه‌های امروزی، اعمال قاعده روی تمام عناصر پروژه در همان ابتدای فایل استایل است:
css/* ریست سراسری مدل جعبه‌ای */
*,
*::before,
*::after {
box-sizing: border-box;
}
با افزودن همین سه خط، چیدمان ستون‌ها در گریدهای درصدی یا سیستم‌های رسپانسیو بدون شکسته‌شدن خطوط و بیرون‌زدن حاشیه‌ها در کنار یکدیگر قرار می‌گیرند.
اشتباه دیگر، فراموش کردن خاصیت ادغام مارجین‌ها (Margin Collapsing) است. اگر دو جعبه‌ی زیر هم قرار بگیرند و بالایی ۲۰ پیکسل مارجین پایین داشته باشد و پایینی ۳۰ پیکسل مارجین بالا، فاصله‌ی میان آن‌ها ۵۰ پیکسل نخواهد شد؛ بلکه مرورگر عدد بزرگ‌تر یعنی ۳۰ پیکسل را به عنوان فاصله‌ی مشترک در نظر می‌گیرد.
قدم بعدی برای تسلط بر چیدمان وب
درک مدل جعبه‌ای سنگ بنای هر ساختاری در صفحات اینترنتی است. وقتی رفتار محتوا، حواشی و نحوه اندازه‌گیری آن‌ها برایتان روشن شد، ورود به مباحث چینش منعطف با فلکس‌باکس و گرید بسیار ساده‌تر خواهد شد. برای تمرین، یک کارت محصول ساده شامل تصویر، عنوان و دکمه طراحی کنید و با ابزار Inspect مرورگر لایه‌های مارجین، بوردر و پدینگ آن را بررسی کنید تا تفاوت رفتار آن‌ها را در محیط واقعی بسنجید. برای دنبال کردن یک نقشه‌ی راه ساختاریافته و گام‌به‌گام، دوره‌ی وب از صفر تا حرفه‌ای: HTML و CSS مسیر یادگیری شما را هموار می‌کند.
نظرها
اولین نفری باشید که نظر میدهدسؤالتان را بپرسید یا تجربه‌تان را بنویسید تا نویسنده‌ی مطلب پاسخ بدهد.