مدل جعبه ای در CSS (Box Model)
در CSS، «مدل جعبه ای (Box Model)» چهار بخش دارد: محتوا، لایه درونی یا پدینگ، کادر، و فاصله بیرونی یا مارجین. این مدل نحوه چیدمان و فاصله گذاری عناصر را تعیین می کند.
مدل جعبه ای چیست؟
هر عنصر HTML مانند یک جعبه است که دورِ محتوا را پدینگ، سپس کادر و در نهایت مارجین احاطه می کند. با این مدل می توان پیرامون عناصر کادر افزود و بین آن ها فاصله ایجاد کرد.
- Content — محلی برای متن و تصویر
- Padding — فضای شفاف اطراف محتوا
- Border — کادری دورِ پدینگ و محتوا
- Margin — فضای شفاف بیرون از کادر
نمونه ساده از مدل جعبه ای
div { width: 300px; border: 15px solid green; padding: 50px; margin: 20px; }مدل جعبه ای پایه محاسبات اندازه است و برای کنترل فاصله ها بسیار کاربردی است.
محاسبه عرض و ارتفاع کل
وقتی width و height را تنظیم می کنید، فقط ناحیه محتوا تعیین می شود. برای اندازه واقعی، پدینگ و کادر را نیز باید در نظر گرفت.
div { width: 320px; height: 50px; padding: 10px; border: 5px solid gray; margin: 0; }محاسبه عرض کل: 320px (محتوا) + 20px (پدینگ افقی) + 10px (کادر افقی) = 350px. محاسبه ارتفاع کل: 50px (محتوا) + 20px (پدینگ عمودی) + 10px (کادر عمودی) = 80px.
نکته: ویژگی margin فضای اشغال شده در صفحه را افزایش می دهد، اما داخل اندازه واقعی جعبه محاسبه نمی شود.
مطالعه بیشتر و بخش های مرتبط
برای تسلط بهتر بر «مدل جعبه ای»، این مطالب را نیز ببینید: لایه (Padding)، ارتفاع و عرض و کادرها. همچنین مرجع های بیرونی: آشنایی با Box Model در MDN و استاندارد W3C بخش Box.