box model یکی از مفاهیم پایه‌ای در CSS است که نحوه نمایش و چیدمان عناصر را در صفحه وب تعیین می‌کند. هر عنصر HTML به عنوان یک جعبه (box) در نظر گرفته می‌شود که از چندین لایه تشکیل شده است. درک این مدل برای طراحی دقیق و کنترل فاصله‌ها و اندازه‌های عناصر ضروری است.
box model در CSS از چهار جزء اصلی تشکیل شده است که به ترتیب از درون به بیرون عبارتند از: محتوا (content)، حاشیه داخلی (padding)، حاشیه (border) و حاشیه خارجی (margin). هر یک از این اجزا نقش خاصی در تعیین ظاهر نهایی عنصر دارند.
کاربردهای عملی box model
در طراحی وب، box model به شما امکان می‌دهد تا فاصله‌ها و اندازه‌های عناصر را به دقت کنترل کنید. با استفاده از این مدل می‌توانید:
- فاصله بین محتوا و حاشیه عنصر را تنظیم کنید (padding)
- حاشیه‌های قابل مشاهده برای عناصر ایجاد کنید (border)
- فاصله بین عناصر مختلف را مدیریت کنید (margin)
- اندازه کلی عناصر را با در نظر گرفتن تمام لایه‌ها محاسبه کنید
نمونه کدهای مرتبط
در ادامه سه مثال از کاربرد box model در CSS را مشاهده می‌کنید:
مثال ۱: تنظیم padding و margin برای یک دکمه
.button {
width: 200px;
padding: 15px;
margin: 20px;
border: 2px solid #3498db;
}مثال ۲: استفاده از box-sizing برای تغییر نحوه محاسبه اندازه‌ها
.box {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 5px solid #2ecc71;
}مثال ۳: ایجاد افکت‌های بصری با استفاده از box model
.card {
width: 250px;
padding: 25px;
margin: 15px auto;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}خلاصه درس
- محتوا (content): بخش اصلی عنصر که متن یا تصاویر را شامل می‌شود
- حاشیه داخلی (padding): فضای خالی بین محتوا و حاشیه (border)
- حاشیه (border): خطی که دور عنصر کشیده می‌شود و بین padding و margin قرار دارد
- حاشیه خارجی (margin): فضای خالی خارج از border که فاصله بین عناصر را تعیین می‌کند
- به طور پیش‌فرض، width و height فقط شامل محتوا می‌شوند، مگر اینکه از box-sizing: border-box استفاده شود
درک صحیح از box model به شما کمک می‌کند تا طرح‌های دقیق‌تری ایجاد کنید و مشکلات رایج چیدمان عناصر را به راحتی حل نمایید. این مفهوم پایه‌ای برای هر طراحی وب ضروری است و تسلط بر آن باعث بهبود چشمگیر کیفیت کارهای شما خواهد شد.
