لرن سورس
ورود

صفات width و height در CSS

از صفات  height و width برای تنظیم طول و عرض یک عنصر استفاده میشود. در این فصل با انواع صفاتی که برای تنظیم طول و عرض یک عنصر استفاده میشود آشنا میشویم.

عنصری که در زیر آورده شده است داری طولی برابر با 100 درصد فضایی است که در اختیار آن قرار داده شده است :

طول این عنصر برابر با %100 است.

مقداردهی صفات height و width 

از صفات  height و width برای تنظیم طول و عرض یک عنصر استفاده میشود.

صفات height و width میتوانند با مقدار auto (که این مقدار پیشفرض برای این دو صفت است و به این معناست که مرورگر طول و عرض را محاسبه میکند) ، یا تعیین یک مقدار که میتواند در واحد های پیکسل، سانتی متر و ... باشد ، یا تعیین یک مقدار به صورت درصدی (%)، مقدار دهی شوند.

عنصری که در زیر نشان داده شده است دارای مقدار 200 پیکسل برای عرض و 50% برای طول است :

این عنصر دارای طول %50 و عرض 200 پیکسل است.
div {
    height: 200px;
    width: 50%;
    background-color: powderblue;
}
خودتان امتحان کنید

 عنصری که در زیر نشان داده شده است دارای مقدار 100 پیکسل برای عرض و 500 پیکسل برای طول است :

این عنصر دارای طول 500 پیکسل و عرض 100 پیکسل است.
div {
    height: 100px;
    width: 500px;
    background-color: powderblue;
}
خودتان امتحان کنید

مقدار دهی صفت max-width

از صفت max-width برای تنظیم حداکثر طول یک عنصر استفاده میشود.

صفت max-width میتواند به وسیله ی مقادیری که در واحد های پیکسل ، سانتیمتر و ... مشخص میشوند، و یا درصدی (%) از فضایی که د ر آن قرار گرفته است و یا با مقدار none (که این مقدار پیشفرض برای این صفت است و به این معناست مقداری برای این صفت تعیین نشده است) مقدار دهی شود.

مشکلی که مقدار دهی ثابت برای طول عناصر وجود دارد این است که برای مثال اگر عنصری با طول 500 پیکسل مقدار دهی شود، زمانی که پنجره مرورگر از این مقدار کوچکتر شود مرورگر برای اینکه بتواند این عنصر را به طور کامل نشان دهد باید به صورت افقی اسکرول بخورد.

در این مواقع با استفاده از صفت max-width میتوان این مشکل را مدیریت کرد.

این عنصر دارای حداکثر طول 500 پیکسل و عرض 100 پیکسل است.

نکته: با مقدار دهی صفت max-width ، صفت width بی اثر خواهد شد. 

 

در نمونه مثال زیر یک عنصر div نشان داده شده است که دارای عرض 100 پیکسل و حداکثر طول 500 پیکسل است.

div {
    max-width: 500px;
    height: 100px;
    background-color: powderblue;
}
خودتان امتحان کنید

تمام صفات ابعاد در CSS 

    صفت     توضیح
    height     تنظیم عرض یک عنصر  
    max-height     تنظیم حداکثر عرض برای یک عنصر
    max-width     تنظیم حداکثر طول برای یک عنصر
    min-height     تنظیم حداقل عرض برای یک عنصر
    min-width     تنظیم حداقل طول برای یک عنصر
    width      تنظیم طول برای یک عنصر

دیدگاه ها

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید

آموزش CSS

هدف لرن سورس

لرن سورس با هدف ایجاد یک مرجع کامل و جامع در زمینه آموزش دوره محور زبان های برنامه نویسی و وب پا به عرصه وب گذاشته است.

ما در لرن سورس همیشه سعی خواهیم کرد تا نیاز های آموزشی شما کاربران عزیز را در قالب آموزش های مختلف پاسخ دهیم.

بخش های اصلی

با استفاده از لینک های زیر میتوانید به بخش های اصلی سایت دسترسی داشته باشید:

راه های ارتباطی

شما کاربران عزیز میتوانید با هر کدام از راه های ارتباطی زیر با تیم آموزشی لرن سورس در ارتباط باشید:

کلیه حقوق مادی و معنوی وبسایت متعلق به لرن سورس می باشد.