مفهوم باکسمادل (Box Model)
مفهوم باکسمادل (CSS Box Model): قلب طراحی وب 📦💓
تمام المانهای HTML در ساختار CSS به شکل یک باکس (جعبه) دیده میشوند. درک Box Model به این معنی است که بدانید چطور لایههای مختلف یک المان روی هم قرار میگیرند تا اندازه نهایی و جایگاه آن در صفحه را تعیین کنند.
۱. لایههای تشکیل دهنده
- Content (محتوا): مرکز باکس که متن یا تصویر در آن قرار دارد.
- Padding (پدینگ): فضای شفاف اطراف محتوا (داخل باکس).
- Border (حاشیه): خطی که دور پدینگ و محتوا کشیده میشود.
- Margin (مارجین): فضای شفاف بیرون باکس که آن را از بقیه المانها جدا میکند.
یک مثال عملی از محاسبه عرض:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}محاسبه عرض کل المان در حالت عادی:
300px (width) + 100px (left/right padding) + 30px (left/right border) + 40px (left/right margin) = 470px
۲. چرا باکسمادل گاهی گیج کننده است؟
بزرگترین مشکل این است که وقتی برای یک المان width: 100% تعیین میکنید و سپس به آن padding میدهید، آن المان از صفحه بیرون میزند؛ چون پدینگ به عرض 100% اضافه میشود!
استاندارد جدید (Border-Box): اکثر طراحان وب حرفهای در ابتدای پروژه خود با استفاده از کد زیر، سیستم محاسباتی باکسمادل را تغییر میدهند تا پدینگ و بوردر بخشی از عرض تعیین شده باشند، نه اضافه بر آن:
{code_block('* {\n box-sizing: border-box;\n}')}
ابزار توسعهدهندگان (Inspect): اگر در مرورگر (F12) روی یک المان راست کلیک کنید و Inspect را بزنید، در تب "Computed" میتوانید دیاگرام رنگی Box Model آن المان را دقیقاً ببینید. این بهترین راه برای دیباگ کردن فاصلههاست.
تمرینهای عملی
برای تثبیت یادگیری این درس تمرینهای زیر را حل کنید
تغییر رفتار باکسمادل
Medium
سوال تمرین
ویژگی را بنویسید که باعث میشود پدینگ و حاشیه (Border) جزئی از عرض و ارتفاع المان حساب شوند و به آن اضافه نشوند.
پاسخ تمرین
CSS
div {
box-sizing: border-box;
}آماده رفتن به درس بعدی هستید؟
این درس را به پایان رساندید و میتوانید به درس بعدی بروید.