ارتفاع و عرض

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های 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	عرض یک عنصر را تنظیم می‌کند

صفحهٔ بعد»

«صفحهٔ قبل