ارتفاع و عرض

« صفحهٔ قبل

صفحهٔ بعد »

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

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> تنظیم می کند:

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

مشاهدهٔ نتیجه

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

مثال

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

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

مشاهدهٔ نتیجه

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

تنظیم max-width

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

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

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

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

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

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

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

مثال

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

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

مشاهدهٔ نتیجه

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

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

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

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

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

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

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

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

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

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

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

« صفحهٔ قبل

صفحهٔ بعد »