ارتفاع و عرض
تنظیم ارتفاع و عرض در CSS
ویژگیهای height
و width
برای تنظیم ارتفاع و عرض یک عنصر استفاده میشوند.[۱]
ویژگیهای height و width شامل padding، کادر (به انگلیسی: border)، یا حاشیه نمیشوند. این ویژگی ارتفاع/عرض ناحیه درون padding، کادر، و حاشیه عنصر را تنظیم میکند.
مقادیر ارتفاع/عرض در CSS
ویژگیهای height
و width
می تواند مقادیر زیر را داشته باشند:
auto
- مقدار پیشفرض است. مرورگر ارتفاع و عرض را محاسبه میکند
length
- ارتفاع/عرض را برحسب px ,cm و… مشخص میکند
%
- ارتفاع/عرض را بر اساس درصدی از بلوکی که در آن عنصر قرار دارد تعیین میکند
initial
- مقدار ارتفاع/عرض را روی مقدار پیش فرض تنظیم میکند
inherit
- ارتفاع/عرض از مقدار والد ارث بری خواهد شد
مثال های ارتفاع/پهنا در CSS
مثال
ارتفاع و عرض یک عنصر <div> تنظیم می کند:
مثال
ارتفاع و عرض یک عنصر <div> دیگر را تنظیم می کند:
نکته: به یاد داشته باشید که ویژگیهای height
و width
شامل padding، کادر (به انگلیسی: border)، یا حاشیه ها نمیشوند!
آنها ارتفاع/عرض ناحیه ای درون padding، کادر، و حاشیه عنصر را تنظیم میکنند.
تنظیم max-width
ویژگی max-width
برای تنظیم بیشترین مقدار عرض یک عنصر استفاده میشود.
ویژگی max-width
را میتوان با مقدارهای طولی، مانند px ,cm، و… تعیین کرد، یا بر اساس درصدی از بلوکی که عنصر در آن قرار دارد، یا میتوان آن را برابر با none تنظیم کرد (این مقدار، پیش فرض است. یعنی هیچ عرض حداکثری وجود ندارد).
مشکل با <div>
در مثال بالا زمانی رخ میدهد که مرورگر کوچکتر از عرض عنصر (۵۰۰ پیکسل) است. مرورگر یک نوار پیمایش عمودی به صفحه اضافه میکند.
در این حالت، استفاده از max-width
بعوان جایگزین، مدیریت مرورگر روی پنجرههای کوچک را بهبود میبخشد.
نکته: پنجره مرورگر را به پنجره ای کوچکتر از ۵۰۰ پیکسل تبدیل کنید، تا تفاوت بین دو div را ببینید!
نکته: مقدار ویژگی max-width
مقدار ویژگی width
را نادیده می گیرد.
مثال
عنصر <div> یک ارتفاع به اندازه ۱۰۰ پیکسل و یک حداکثر عرض به اندازه ۵۰۰ پیکسل دارد:
خودتان امتحان کنید - مثال ها
این مثال نحوه تنظیم ارتفاع و عرض عناصر مختلف را نمایش میدهد.
تنظیم ارتفاع و عرض یک تصویر با استفاده از مقدار درصد
این مثال نحوه تنظیم ارتفاع و عرض یک تصویر را با استفاده از مقدار درصدی نمایش میدهد.
تنظیم min-width و max-width یک عنصر
این مثال نحوه تنظیم یک عرض حداقل و حداکثر برای عنصر را با واحد پیکسل نمایش میدهد.
تنظیم min-height و max-height یک عنصر
این مثال نحوه تنظیم یک ارتفاع حداقل و حداکثر برای یک عنصر را با واحد پیکسل نمایش میدهد.
خود را با تمرین ها امتحان کنید!
تمام ویژگی های اندازه در CSS
ویژگی | توضیحات |
---|---|
height | ارتفاع یک عنصر را مشخص میکند |
max-height | حداکثر ارتفاع یک عنصر را مشخص میکند |
max-width | حداکثر عرض یک عنصر را مشخص میکند |
min-height | حداقل ارتفاع یک عنصر را تنظیم میکند |
min-width | حداقل عرض یک عنصر را تنظیم میکند |
width | عرض یک عنصر را تنظیم میکند |
منابع آموزشی