CSS – ارتفاع/عرض (Height/Width)

خواص height و width در CSS برای تنظیم ارتفاع و عرض یک عنصر استفاده می‌شوند. همچنین خاصیت max-width برای تعیین حداکثر عرض یک عنصر به کار می‌رود.

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

  • height: برای تعیین ارتفاع یک عنصر.
  • width: برای تعیین عرض یک عنصر.

نکته: خواص height و width شامل padding، border یا margin نمی‌شوند و فقط ناحیه داخلی عنصر را تنظیم می‌کنند.

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

  • auto: مقدار پیش‌فرض است و مرورگر به طور خودکار اندازه را محاسبه می‌کند.
  • طول (length): می‌تواند بر اساس px، cm و غیره تنظیم شود.
  • درصد (%): بر اساس درصدی از عنصر والد.
  • initial: مقدار را به حالت اولیه باز می‌گرداند.
  • inherit: مقدار را از عنصر والد به ارث می‌برد.

مثال‌ها:

تعیین ارتفاع و عرض به صورت درصدی:

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

تعیین ارتفاع و عرض ثابت:

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

خاصیت حداکثر عرض (max-width)

خاصیت max-width برای تعیین بیشترین عرض مجاز یک عنصر استفاده می‌شود. این مقدار می‌تواند به صورت طولی (px، cm و غیره) یا درصدی از عنصر والد تنظیم شود. همچنین اگر مقدار none تنظیم شود، هیچ محدودیتی برای عرض وجود نخواهد داشت.

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

مثال:

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

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

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

بیشتر بخوانید
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

بیشتر بخوانید
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.