CSS Box Model
مدل جعبهای CSS (CSS Box Model)
هر عنصر HTML به عنوان یک جعبه مستطیلی در نظر گرفته میشود و مدل جعبهای CSS نحوه طراحی و چیدمان این جعبهها را توصیف میکند. این مدل از چهار بخش تشکیل شده که از داخل به بیرون عبارتند از:
1. محتوا
- محتوای واقعی جعبه مثل متن یا تصویر.
2. پدینگ (Padding)
- فضای خالی بین محتوا و کادر (border). این فضا اطراف محتوا را خالی میکند.
3. کادر (Border)
- خطی که دور پدینگ (در صورت وجود) و محتوا کشیده شده است.
4. مارجین (Margin)
- فضای بیرونیترین، که فاصله بین این جعبه و جعبههای دیگر را ایجاد میکند.
—
تصویر سازی:
“`
+—————————+
| مارجین |
| +———————+ |
| | کادر | |
| | +—————+ | |
| | | پدینگ | | |
| | | +———+ | | |
| | | | محتوا | | | |
| | | +———+ | | |
| | +—————+ | |
| +———————+ |
+—————————+
“`
—
خصوصیات CSS مرتبط با مدل جعبهای:
* `width` و `height` — اندازه محتوای جعبه را تعیین میکنند
* `padding` — فضای داخل کادر، اطراف محتوا
* `border` — ضخامت و سبک کادر
* `margin` — فضای بیرون کادر
—
نکات مهم:
* به طور پیشفرض، `width` و `height` فقط روی محتوا اعمال میشوند.
* پدینگ، کادر و مارجین به اندازه کل جعبه اضافه میشوند.
* میتوان با خاصیت `box-sizing` این رفتار را تغییر داد (`content-box` یا `border-box`).
دیدگاهتان را بنویسید