ارتفاع و عرض و حداکثر عرض در SCC

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

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

این عنصر دارای ارتفاع ۷۰ پیکسل و عرض ۱۰۰٪ است.

تنظیم ارتفاع و عرض در CSS

ویژگی‌های height و width ارتفاع و عرض ناحیه محتوای عنصر را مشخص می‌کنند.

 توجه: این ویژگی‌ها شامل padding، border یا margin نمی‌شوند. آن‌ها فقط ناحیه داخلی عنصر را تحت تأثیر قرار می‌دهند.

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

ویژگی‌های height و width می‌توانند مقادیر زیر را داشته باشند:

• auto — مقدار پیش‌فرض؛ مرورگر به‌صورت خودکار اندازه را محاسبه می‌کند

• length — تعیین اندازه با واحدهایی مانند px، cm، em و غیره

• % — تعیین اندازه به‌صورت درصدی از بلوک والد

• initial — بازگرداندن مقدار به حالت پیش‌فرض

• inherit — مقدار از عنصر والد به ارث برده می‌شود

مثال‌ها

تعیین ارتفاع ۲۰۰ پیکسل و عرض ۵۰٪ برای یک عنصر <div>:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

تعیین ارتفاع ۱۰۰ پیکسل و عرض ۵۰۰ پیکسل:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

 یادآوری: ویژگی‌های height و width فقط ناحیه محتوای عنصر را تحت تأثیر قرار می‌دهند و شامل padding، border یا margin نمی‌شوند.

استفاده از ویژگی max-width در CSS

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

مقادیر قابل‌استفاده برای max-width عبارت‌اند از:

• length — تعیین حداکثر عرض با واحدهایی مانند px، cm و غیره

• % — تعیین حداکثر عرض به‌صورت درصدی از بلوک والد

• none — مقدار پیش‌فرض؛ یعنی هیچ محدودیتی برای عرض وجود ندارد

یکی از مشکلات رایج هنگام استفاده از width این است که اگر عرض مرورگر کمتر از عرض عنصر باشد، مرورگر یک نوار اسکرول افقی به صفحه اضافه می‌کند. استفاده از max-width باعث بهبود نمایش در پنجره‌های کوچک‌تر می‌شود.

مثال‌ها

مقایسه دو عنصر با width و max-width:

.div1 {
  max-width: 500px;
  background-color: powderblue;
}

.div2 {
  width: 500px;
  background-color: powderblue;
}

اگر مرورگر را کوچک‌تر از ۵۰۰ پیکسل کنید، عنصر .div1 به‌درستی واکنش‌گرا باقی می‌ماند، اما .div2 باعث ایجاد اسکرول افقی می‌شود.

استفاده هم‌زمان از width و max-width

اگر برای یک عنصر هم width و هم max-width تعریف شود، و مقدار width بیشتر از max-width باشد، مقدار max-width اعمال خواهد شد.

مثال:

.div1 {
  width: 100%;
  max-width: 900px;
  background-color: powderblue;
}

در این مثال، عرض عنصر در حالت عادی برابر با ۱۰۰٪ است، اما هرگز از ۹۰۰ پیکسل بیشتر نخواهد شد.

مثال‌های بیشتر

• تنظیم ارتفاع و عرض عناصر مختلف

• تنظیم ارتفاع و عرض تصویر با استفاده از درصد

• تنظیم حداقل و حداکثر عرض یک عنصر با واحد پیکسل

• تنظیم حداقل و حداکثر ارتفاع یک عنصر با واحد پیکسل

فهرست کامل ویژگی‌های CSS مربوط به ابعاد