CSS — مدل جعبه ای (Box Model)

آخرین بروزرسانی: 1404/07/13

قبلی: ارتفاع، عرض و حداکثر عرض (Height, Width and Max-width) بعدی: خط پیرامونی (Outline)

مدل جعبه ای در 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.