تعریف

هر عنصر HTML در CSS مثل یک جعبه (Box) در نظر گرفته میشه.
این جعبه از چند بخش مختلف تشکیل شده که ترتیبشون از داخل به بیرونه:

1. Content (محتوا) → همون متن یا تصویر یا هر چیزی که داخل عنصر قرار می‌گیره.

2. Padding (پدینگ) → فاصله‌ی بین محتوا و مرز (Border).

3. Border (مرز) → خط دور عنصر.

4. Margin (مارجین) → فاصله‌ی عنصر با عناصر کناری یا بیرونی.

📊 ساختار Box Model

+-----------------------+
|       Margin          |
|  +-----------------+  |
|  |     Border      |  |
|  | +-------------+ |  |
|  | |   Padding   | |  |
|  | | +---------+ | |  |
|  | | | Content | | |  |
|  | | +---------+ | |  |
|  | +-------------+ |  |
|  +-----------------+  |
+-----------------------+

✨ ویژگی‌های کلیدی

🔹 Content

• همون چیزی که کاربر می‌بینه (متن، عکس و ...)

div {
  width: 200px;
  height: 100px;
}

🔹 Padding

• فاصله بین محتوا و Border

div {
  padding: 20px;
}

🔹 Border

• خط دور عنصر که می‌تونه ضخامت، رنگ و نوع‌های مختلف داشته باشه

div {
  border: 2px solid red;
}

🔹 Margin

• فاصله بیرونی عنصر نسبت به بقیه عناصر

div {
  margin: 30px;
}

📐 Box-sizing

به طور پیش‌فرض، وقتی width و height مشخص می‌کنی، فقط Content حساب میشه و Padding و Border بهش اضافه میشه.

اما اگه بخوای همه (Content + Padding + Border) داخل همون width و height باشن:

div {
  box-sizing: border-box;
}

✅ خیلی پرکاربرده چون اندازه‌ها دقیق‌تر میشن.

🎯 مثال عملی

.box {
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 5px solid blue;
  margin: 30px;
  background-color: lightyellow;
  box-sizing: border-box;
}