آموزش کار با ویژگی های Height و Width در CSS

مقدمه

در طراحی صفحات وب، کنترل اندازه عناصر یکی از مهم‌ترین مهارت‌ها است. ویژگی‌های Width و Height در CSS به شما اجازه می‌دهند عرض و ارتفاع عناصر را به صورت دقیق تنظیم کنید. این ویژگی‌ها پایه طراحی Responsive و چیدمان حرفه‌ای محسوب می‌شوند. برای یادگیری کامل و پروژه‌محور CSS پیشنهاد می‌کنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.

توضیح مفهومی Height و Width

این دو ویژگی برای تعیین اندازه عناصر در صفحه استفاده می‌شوند و می‌توانند با واحدهای مختلفی تعریف شوند.

واحدهای رایج اندازه‌گیری:

• px → اندازه ثابت
• % → اندازه نسبی
• vw / vh → نسبت به صفحه نمایش
• auto → تنظیم خودکار

مثال عملی با کد

تعریف اندازه ثابت:

div {
  width: 300px;
  height: 200px;
}

استفاده از درصد:

.container {
  width: 80%;
}

استفاده از واحد viewport:

.hero {
  height: 100vh;
}

تنظیم خودکار:

img {
  width: 100%;
  height: auto;
}

نکات مهم و توضیحات تکمیلی

• استفاده از درصد باعث طراحی Responsive می‌شود.
• ویژگی height: auto برای تصاویر بسیار مهم است.
• عرض عنصر معمولاً مهم‌تر از ارتفاع در طراحی است.
• این ویژگی‌ها پایه فهم Box Model هستند.

ادامه آموزش CSS

برای یادگیری کامل چیدمان حرفه‌ای، مدل باکس CSS و تکنیک‌های مدرن طراحی، ادامه مسیر یادگیری را در دوره جامع دنبال کنید: ادامه یادگیری در دوره CSS.