عرض و ارتفاع در CSS چگونه کار می‌کنند؟ (width/height + min/max با مثال‌های کاربردی)

در CSS، ویژگی‌های width و height برای کنترل ابعاد عناصر در یک صفحه وب استفاده می‌شوند.

این ویژگی‌ها می‌توانند با واحدهای مختلفی تعریف شوند، مانند پیکسل (px)، درصد (%)، واحدهای viewport (vw، vh) و موارد دیگر.

ویژگی width عرض یک عنصر را مشخص می‌کند. اگر عرضی مشخص نکنید، مقدار پیش‌فرض روی auto قرار می‌گیرد. این باعث می‌شود مرورگر عرض عنصر را بر اساس محتوای آن، عنصر والد و نوع نمایش آن تعیین کند. برای یک عنصر div، مقدار width: auto باعث می‌شود عنصر گسترش پیدا کند و تمام عرض ظرف والد خود را پر کند.

ویژگی height ارتفاع یک عنصر را مشخص می‌کند. به همین شکل، مقدار پیش‌فرض ارتفاع نیز auto است، یعنی ارتفاع بر اساس محتوای داخل عنصر تنظیم می‌شود.

در اینجا مثالی از استفاده از ویژگی‌های width و height آورده شده است:

<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: skyblue
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>

در این مثال، یک عنصر div با کلاسی به نام box داریم. این عنصر 100 پیکسل عرض و 100 پیکسل ارتفاع خواهد داشت و رنگ پس‌زمینه آن آبی آسمانی (skyblue) خواهد بود.

پیکسل‌ها یک واحد اندازه‌گیری با اندازه ثابت در CSS هستند و امکان کنترل دقیق ابعاد را فراهم می‌کنند.

ویژگی min-width حداقل عرضی را مشخص می‌کند که یک عنصر می‌تواند داشته باشد. حتی اگر محتوای داخل آن کوچک‌تر باشد، عنصر از این مقدار کوچک‌تر نخواهد شد.

ویژگی min-height حداقل ارتفاعی را مشخص می‌کند که یک عنصر می‌تواند داشته باشد. این ویژگی تضمین می‌کند که ارتفاع عنصر از مقدار تعیین‌شده کمتر نشود.

در اینجا یک مثال آورده شده است:

<head>
  <style>
    .box {
      width: 50px;
      min-width: 100px;
      height: 50px;
      min-height: 100px;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>

مثال بالا نشان می‌دهد که min-width و min-height چگونه کار می‌کنند.

با اینکه عرض و ارتفاع جعبه روی 50px تنظیم شده‌اند، اندازه واقعی آن 100px در 100px خواهد بود. دلیلش این است که min-width و min-height روی 100px تنظیم شده‌اند و از عرض و ارتفاع مشخص‌شده بزرگ‌تر هستند.

به خاطر داشته باشید، اگر min-width یا min-height از width یا height بزرگ‌تر باشند، مقدارهای کوچک‌تر را نادیده می‌گیرند و جای آن‌ها را می‌گیرند. این موضوع باعث می‌شود عناصر بیش از حد کوچک نشوند، که برای حفظ طراحی منسجم و قابل استفاده مهم است.

ویژگی max-width حداکثر عرضی را مشخص می‌کند که یک عنصر می‌تواند تا آن رشد کند، حتی اگر فضای کافی برای بزرگ‌تر شدن وجود داشته باشد.

ویژگی max-height حداکثر ارتفاعی را مشخص می‌کند که یک عنصر می‌تواند داشته باشد، بدون توجه به اندازه محتوا.

در اینجا یک مثال آورده شده است:

<head>
  <style>
    .box {
      width: 200px;
      max-width: 150px;
      height: 200px;
      max-height: 150px;
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>

مثال بالا نشان می‌دهد که max-width و max-height چگونه width و height را محدود می‌کنند. با اینکه اندازه جعبه روی 200px در 200px تنظیم شده است، اندازه واقعی آن 150px در 150px خواهد بود. دلیلش این است که max-width و max-height روی 150px تنظیم شده‌اند که کوچک‌تر هستند.

به خاطر داشته باشید، وقتی max-width یا max-height از width یا height کوچک‌تر باشند، اولویت با آن‌ها است. این موضوع برای کنترل حداکثر اندازه عناصر در چیدمان‌های شما مهم است.

CSS به min-width و min-height نسبت به width و height اولویت می‌دهد. همچنین max-width و max-height اگر مقدارها از محدودیتشان بیشتر شوند، ابعاد را محدود می‌کنند.

برای مثال، اگر width را برابر 600px و max-width را برابر 500px قرار دهید، عرض عنصر به 500px محدود می‌شود. max-width مقدار بزرگ‌تر را نادیده می‌گیرد و عنصر را در حداکثر اندازه مشخص‌شده نگه می‌دارد.

این باعث می‌شود عناصر بدون توجه به مقادیر معمول width و height، همیشه در بازه اندازه دلخواه باقی بمانند.

سوالات

اگر روی یک عنصر div مقدار width: 600px; و max-width: 500px; تنظیم کنید چه اتفاقی می‌افتد؟

عنصر 600px عرض خواهد داشت.
عنصر 500px عرض خواهد داشت.
عنصر 550px عرض خواهد داشت.
عنصر 100px عرض خواهد داشت.

اگر روی یک عنصر min-height: 200px و height: 150px تنظیم کنید، ارتفاع عنصر چقدر خواهد بود؟

150px
100px
200px
250px

کدام‌یک از گزینه‌های زیر یک واحد معتبر برای استفاده با ویژگی width نیست؟

hv
px
%
vw