021-20483015

عرض و ارتفاع در CSS

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

صفات height و width برای تنظیم عرض و ارتفاع عناصر به کار می رود. صفات height  و width می توانند بر روی auto تنظیم شوند (پیش فرض مرورگر : خود مرورگر عرض و ارتفاع را محاسبه می کند). یا با مقادیر مشخصی از px ، cm و ... و یا با درصدی از عرض بلوک نگه دارنده عنصر تعریف شوند.

این عنصر دارای 200px ارتفاع و 50% عرض می باشد.


مثال :

عرض و ارتفاع
div {
    height: 200px;
    width: 50%;
    background-color: powderblue;
}
مشاهده مثال




مثال :
عرض و ارتفاع عنصر
div {
    height: 100px;
    width: 500px;
    background-color: powderblue;
}
مشاهده مثال


نکته ! صفات height و width نمی توانند حاوی padding ، margin یا border باشند؛ این دو صفت عرض و ارتفاع داخل این 3 مورد را تنظیم می کنند.

 

تنظیم max-width

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

مشکل در مثال قبلی این است که اگر پنجره مرورگر را کمتر از 500 پیکسل قرار دهیم ، یک نوار اسکرول افقی نمایش داده می شود و باید برای مشاهده ادامه div موجود در آن ، اسکرول کنیم. استفاده از max-width این امکان را برای مرورگر فراهم می کند تا در صفحات کوچکتر ، صفحه را بهینه نمایش دهد.

نکته ! مقدار max-width بر مقدار width غلبه می کند.

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

مثال :

عرض حداکثری عنصر
div {
    max-width: 500px;
    height: 100px;
    background-color: powderblue;
}
مشاهده مثال

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط