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 - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

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

نظرات

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

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