ارتفاع و عرض

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها


این عنصر دارای عرضی به اندازه ۱۰۰٪ است.

This element has a width of 100%

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

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

ویژگی‌های height و width شامل padding، کادر (به انگلیسی: border)، یا حاشیه نمی‌شوند. این ویژگی ارتفاع/عرض ناحیه درون padding، کادر، و حاشیه عنصر را تنظیم می‌کند.

مقادیر ارتفاع/عرض در CSS

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

  • auto - مقدار پیش‌فرض است. مرورگر ارتفاع و عرض را محاسبه می‌کند
  • length - ارتفاع/عرض را برحسب px ,cm و… مشخص می‌کند
  • % - ارتفاع/عرض را بر اساس درصدی از بلوکی که در آن عنصر قرار دارد تعیین می‌کند
  • initial - مقدار ارتفاع/عرض را روی مقدار پیش فرض تنظیم می‌کند
  • inherit - ارتفاع/عرض از مقدار والد ارث بری خواهد شد

مثال های ارتفاع/پهنا در CSS

این عنصر ارتفاعی به اندازه ۲۰۰ پیکسل و عرضی به اندازه ۵۰٪ دارد

مثال

ارتفاع و عرض یک عنصر <div> تنظیم می کند:

1 div {
2   height: 200px;
3   width: 50%;
4   background-color: powderblue;
5 }


این عنصر ارتفاعی به اندازه ۱۰۰ پیکسل و عرضی به اندازه ۵۰۰ پیکسل دارد

مثال

ارتفاع و عرض یک عنصر <div> دیگر را تنظیم می کند:

1 div {
2   height: 100px;
3   width: 500px;
4   background-color: powderblue;
5 }


نکته: به یاد داشته باشید که ویژگی‌های height و width شامل padding، کادر (به انگلیسی: border)، یا حاشیه ها نمی‌شوند!
آنها ارتفاع/عرض ناحیه ای درون padding، کادر، و حاشیه عنصر را تنظیم می‌کنند.

تنظیم max-width

ویژگی max-width برای تنظیم بیش‌ترین مقدار عرض یک عنصر استفاده می‌شود.

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

مشکل با <div> در مثال بالا زمانی رخ می‌دهد که مرورگر کوچکتر از عرض عنصر (۵۰۰ پیکسل) است. مرورگر یک نوار پیمایش عمودی به صفحه اضافه می‌کند.

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

نکته: پنجره مرورگر را به پنجره ای کوچکتر از ۵۰۰ پیکسل تبدیل کنید، تا تفاوت بین دو div را ببینید!

این عنصر ارتفاعی به اندازه ۱۰۰ پیکسل و یک حداکثر عرض به اندازه ۵۰۰ پیکسل دارد.

نکته: مقدار ویژگی max-width مقدار ویژگی width را نادیده می گیرد.

مثال

عنصر <div> یک ارتفاع به اندازه ۱۰۰ پیکسل و یک حداکثر عرض به اندازه ۵۰۰ پیکسل دارد:

1 div {
2   max-width: 500px;
3   height: 100px;
4   background-color: powderblue;
5 }


خودتان امتحان کنید - مثال ها

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

این مثال نحوه تنظیم ارتفاع و عرض عناصر مختلف را نمایش می‌دهد.

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

این مثال نحوه تنظیم ارتفاع و عرض یک تصویر را با استفاده از مقدار درصدی نمایش می‌دهد.

تنظیم min-width و max-width یک عنصر

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

تنظیم min-height و max-height یک عنصر

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

خود را با تمرین ها امتحان کنید!

تمام ویژگی های اندازه در CSS

ویژگی توضیحات
height ارتفاع یک عنصر را مشخص می‌کند
max-height حداکثر ارتفاع یک عنصر را مشخص می‌کند
max-width حداکثر عرض یک عنصر را مشخص می‌کند
min-height حداقل ارتفاع یک عنصر را تنظیم می‌کند
min-width حداقل عرض یک عنصر را تنظیم می‌کند
width عرض یک عنصر را تنظیم می‌کند


منابع آموزشی