صفحه اصلی / آموزش CSS / تنظیم ارتفاع و عرض در CSS/بخش نهم- آموزش تنظیم ارتفاع و عرض در CSS

تنظیم ارتفاع و عرض در CSS/بخش نهم- آموزش تنظیم ارتفاع و عرض در CSS

تنظیم ارتفاع و عرض در CSS/بخش نهم- آموزش تنظیم ارتفاع و عرض در CSS
تنظیم ارتفاع و عرض در CSS

 

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

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

ارتفاع و عرض را می توان به خودکار تنظیم کرد (این به طور پیش فرض مورد استفاده است؛ به این معنی که مرورگر ارتفاع و عرض را محاسبه می کند) یا در مقادیر طول مانند: پیکسل، سانتی متر یا درصد (٪) بلوک حاوی مطلب و غیره  مشخص می شود .

مثال:

اگر کد بالا را اجرا کنید تصویر زیر را در خروجی خواهید دید:

تنظیم ارتفاع و عرض در CSS/بخش نهم- آموزش تنظیم ارتفاع و عرض در CSS

 

یک مثال دیگر:

با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:

تنظیم ارتفاع و عرض در CSS/بخش نهم- آموزش تنظیم ارتفاع و عرض در CSS

 

نکته: ویژگی های ارتفاع و عرض شامل padding، borders یا margins نیست. آنها ارتفاع/عرض ناحیه داخل پدینگ، مرز و حاشیه عنصر را جدا تنظیم می کنند!

تنظیم حداکثر عرض

خصوصیت max-width برای تعیین حداکثر عرض یک عنصر استفاده می شود.

حداکثر عرض را می توان در مقادیر طول، مانند پیکسل px، سانتی متر cm و غیره، یا درصد (٪) بلوک حاوی مطلب مشخص کرد یا با مقدار none(هیچ) (مقدار هیچ به طور پیش فرض است. به این معنی که حداکثر عرض وجود ندارد).

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

با استفاده از حداکثر عرض، در این وضعیت، مرورگر پنجره های کوچک را بهبود می بخشد.

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

نکته: مقدار حداکثر عرض ابعاد عرض را فراتر می برد.

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

مثال:

با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:

تنظیم ارتفاع و عرض در CSS/بخش نهم- آموزش تنظیم ارتفاع و عرض در CSS

 

 

 

 

بخش نهم- آموزش تنظیم ارتفاع و عرض در CSS

لطفا امتیاز بدهید



منبع مطلب

این مطالب را نیز ببینید!

بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

CSS Layout – عرض و حداکثر عرض  استفاده از width, max-width and margin: auto همانطور …

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *