Width و Height

تعیین اندازه محتوا: Width و Height

در درس قبل دیدیم که Content درونی‌ترین لایه جعبه‌ست. حالا وقتشه دقیق‌تر ببینیم Propertyهای width و height دقیقاً چه چیزی رو کنترل می‌کنن، چه مقادیری قبول می‌کنن، و چطور با بقیه بخش‌های Box Model تعامل دارن.

width و height دقیقاً چه چیزی را تعیین می‌کنند؟

به‌طور پیش‌فرض (یعنی بدون تغییر box-sizing که در درس بعدی می‌بینیم)، Propertyهای width و height فقط اندازه ناحیه Content رو مشخص می‌کنن؛ نه Padding، نه Border و نه Margin.

.box {
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 5px solid teal;
  background-color: #e0f7fa;
}

در این مثال، ناحیه Content دقیقاً ۳۰۰ در ۱۵۰ پیکسل است. اما عرض و ارتفاع واقعی و نهایی جعبه‌ای که روی صفحه اشغال می‌شه، بیشتر از این مقداره؛ چون Padding و Border هم به این ابعاد اضافه می‌شن. این نکته دقیقاً همون چیزیه که در درس بعدی با مفهوم box-sizing کامل بررسیش می‌کنیم.

واحدهای قابل استفاده برای width و height

این دو Property می‌تونن مقادیر مختلفی بگیرن:

.box-px {
  width: 400px;
}

.box-percent {
  width: 50%;
}

.box-auto {
  width: auto;
}

• واحد ثابت (مثل px): اندازه‌ای کاملاً مشخص و غیرمتغیر، صرف‌نظر از اندازه صفحه یا والد.
• درصد (%): اندازه‌ای نسبت به اندازه والد؛ مثلاً width: 50% یعنی نصف عرض عنصر والد.
• auto: مقدار پیش‌فرض بیشتر عناصر؛ مرورگر خودش بر اساس نوع Display و محتوا، اندازه رو محاسبه می‌کنه.

واحدهای مدرن‌تر مثل vw، vh، rem یا clamp() رو در فصل‌های بعدی (Units و Responsive Design) با جزئیات کامل بررسی می‌کنیم؛ فعلاً تمرکز ما روی مفهوم پایه‌ایه.

رفتار پیش‌فرض width روی عناصر Block

div {
  background-color: #fce4ec;
}

<div>این div بدون width مشخص است.</div>

عناصری مثل div که به‌طور پیش‌فرض Display برابر block دارن (این مفهوم رو در فصل ۵ کامل می‌بینیم)، وقتی width تعریف نشده باشه، به‌طور خودکار کل عرض موجود در والدشون رو اشغال می‌کنن؛ یعنی رفتار width: auto برای این نوع عناصر معمولاً یعنی «پر کردن کل عرض والد».

محدود کردن اندازه با min و max

گاهی می‌خوایم یک عنصر انعطاف‌پذیر باشه، ولی از یک حد مشخص کوچک‌تر یا بزرگ‌تر نشه. برای این کار چهار Property وجود داره:

.responsive-box {
  width: 80%;
  min-width: 200px;
  max-width: 600px;
}

در این مثال، عرض عنصر همیشه ۸۰ درصد والدشه، ولی هیچ‌وقت کمتر از ۲۰۰ پیکسل و هیچ‌وقت بیشتر از ۶۰۰ پیکسل نمی‌شه؛ صرف‌نظر از اینکه عرض والد چقدر باشه.

min-height و max-height

.card {
  min-height: 150px;
  max-height: 400px;
  overflow-y: auto;
}

این مثال یه کارت می‌سازه که حداقل ۱۵۰ پیکسل ارتفاع داره (حتی اگه محتواش کم باشه)، ولی از ۴۰۰ پیکسل هم بیشتر نمی‌شه؛ اگه محتوا بیشتر از این مقدار جا بگیره، Property به اسم overflow-y (که در درس‌های بعدی کامل بررسیش می‌کنیم) اجازه اسکرول داخلی رو می‌ده.

چرا height در بسیاری موارد نباید مقدار ثابت بگیرد؟

یکی از اشتباهات رایج، تعریف یک height ثابت روی عناصری که محتوای متغیر دارن (مثل یک کارت با متن‌های مختلف):

.card {
  height: 100px;
}

<div class="card">
  این کارت متن خیلی زیادی دارد که ممکن است از ۱۰۰ پیکسل ارتفاع تجاوز کند و باعث برهم‌ریختگی طراحی یا سرریز محتوا شود.
</div>

اگه محتوای داخل این کارت بیشتر از فضای ۱۰۰ پیکسلی جا نگیره، محتوا از جعبه بیرون می‌زنه (مگر اینکه رفتار overflow رو صریحاً تنظیم کرده باشیم). به همین دلیل، در اکثر موارد واقعی، بهتره به‌جای height ثابت، از min-height استفاده بشه تا جعبه بتونه با محتوای بیشتر، به‌طور طبیعی رشد کنه.

یک مثال کامل و مقایسه‌ای

.fixed-box {
  width: 300px;
  height: 100px;
}

.flexible-box {
  width: 80%;
  min-width: 250px;
  max-width: 500px;
  min-height: 100px;
}

در این مثال، .fixed-box همیشه دقیقاً همون ابعاد رو داره، صرف‌نظر از محتوا یا اندازه صفحه. اما .flexible-box رفتار بسیار انعطاف‌پذیرتری داره: عرضش با اندازه والد تغییر می‌کنه (ولی بین ۲۵۰ تا ۵۰۰ پیکسل محدود می‌مونه)، و ارتفاعش هم بر اساس محتوا رشد می‌کنه، اما هیچ‌وقت کمتر از ۱۰۰ پیکسل نمی‌شه.

نکات مهم

• به‌طور پیش‌فرض، width و height فقط ناحیه Content رو تعیین می‌کنن، نه کل جعبه.
• min-width، max-width، min-height و max-height امکان طراحی انعطاف‌پذیر و محدودشده رو هم‌زمان فراهم می‌کنن.
• استفاده از height ثابت روی عناصر با محتوای متغیر، معمولاً باعث مشکلاتی مثل سرریز محتوا می‌شه.

اشتباهات رایج

• تصور اینکه width تعریف‌شده، برابر با کل عرض جعبه (شامل Padding و Border) است.
• استفاده از height ثابت روی عناصری که محتوای متغیر و پیش‌بینی‌نشده دارن.
• فراموش کردن min-width یا max-width در طراحی‌های انعطاف‌پذیر، که می‌تونه در صفحه‌نمایش‌های خیلی کوچک یا خیلی بزرگ، ظاهر عنصر رو بی‌کیفیت کنه.

جمع‌بندی

Propertyهای width و height، به‌طور پیش‌فرض فقط اندازه ناحیه Content یک عنصر رو تعیین می‌کنن. این مقادیر می‌تونن ثابت (px)، نسبی (درصد) یا خودکار (auto) باشن. Propertyهای min-width، max-width، min-height و max-height امکان محدود کردن این اندازه‌ها رو در یک بازه مشخص فراهم می‌کنن و ابزار مهمی برای طراحی انعطاف‌پذیر محسوب می‌شن.