تعریف

ویژگی‌های width و height در CSS برای تعیین عرض (Width) و ارتفاع (Height) عناصر HTML استفاده می‌شوند.

این ویژگی‌ها تعیین می‌کنند که جعبه (Box) هر عنصر چه اندازه‌ای داشته باشد.

✨ نحوه استفاده

1. مقدار ثابت (px, em, rem و غیره)

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

✅ عرض 300px و ارتفاع 200px

2. درصد (%)

div {
  width: 80%;
  height: 50%;
}

✅ عرض و ارتفاع با توجه به عنصر والد (Parent) محاسبه می‌شود.

3. مقدار auto (پیش‌فرض)

div {
  width: auto;  /* با محتوای داخلش تنظیم می‌شود */
  height: auto; /* با محتوای داخلش تنظیم می‌شود */
}

✨ مقادیر ویژه

🔹 min-width / max-width

• min-width → حداقل عرض عنصر

• max-width → حداکثر عرض عنصر

div {
  min-width: 200px;
  max-width: 600px;
}

🔹 min-height / max-height

• min-height → حداقل ارتفاع

• max-height → حداکثر ارتفاع

div {
  min-height: 150px;
  max-height: 400px;
}

📌 نکات مهم

1. اگر height مشخص نشه → عنصر ارتفاعش رو از محتوا می‌گیره.

2. اگر width مشخص نشه → به طور پیش‌فرض عرض عنصر auto هست (یعنی کل فضای والد رو پر می‌کنه).

3. همراه با box-sizing: border-box; → padding و border هم داخل width/height حساب می‌شن.

✨ مثال کامل

.box {
  width: 400px;
  height: 250px;
  min-width: 200px;
  max-width: 600px;
  min-height: 150px;
  max-height: 400px;
  background-color: lightblue;
  box-sizing: border-box;
}