ویژگی width و height در CSS

با استفاده از ویژگی width، می توان عرض المان را مشخص کرد.

با استفاده از ویژگی height، می توان ارتفاع المان را مشخص کرد.

width: 100px;
height: 150px;

ویژگی max-width و max-height در CSS

ویژگی max-width، حداکثر عرض ممکن برای المان را مشخص می کند.

ویژگی max-height، حداکثر ارتفاع ممکن برای المان را مشخص می کند.

مقدار ویژگی max-width و max-height به صورت پیش فرض، none است.

width: 80%;
max-width: 200px;

نکته: مقدار width از max-width باید کوچک تر باشد.

نکته: مقدار height از max-height باید کوچک تر باشد.

چرا باید از max-wdith یا max-height استفاده می کنیم؟

اگر مقدار width به صورت نسبی (مثلا 90 درصد) و مقدار max-width به صورت قطعی (مثلا 100 پیکسل) وارد شود، در این موقعیت این امکان وجود دارد که 90 درصد از 100 پیکسل بیشتر شود. با وجود max-width از این امکان جلوگیری می کنیم.

width: 900px;
max-width: 150px;
height: 900px;
max-height: 150px;

ویژگی min-width و min-height در CSS

ویژگی min-width، حداقل عرض ممکن برای المان را مشخص می کند.

ویژگی min-height، حداقل ارتفاع ممکن برای المان را مشخص می کند.

مقدار ویژگی min-width و min-height  به صورت پیش فرض، none است.

height: 20%;
min-height: 400px;

نکته: در صورتی که از ویژگی height و min-height، همزمان استفاده شود، حتی اگر height کوچکتر باشد، باز هم، min-height اجرا می شود. در واقع min-height، حداقل ارتفاع ممکن را مشخص می کند.

width: 10%;
min-width: 300px;

نکته: در صورتی که از ویژگی width و min-width، با هم استفاده شود. حتی اگر width کوچکتر باشد، باز هم، min-width اجرا می شود. در واقع min-width، حداقل عرض ممکن را مشخص می کند.

 height: 10%;
min-height: 300px;

تفاوت width با max-width و min-width در CSS

ویژگی width، عرض المان را مشخص می کند.

ویژگی max-width، حداکثر عرض ممکن را مشخص می کند.

ویژگی min-width، حداقل عرض ممکن را مشخص می کند.

به طور مثال شما width یک المان را 100% و max-width را 500px در نظر می گیرید.

چون واحد درصد نسبت به عرض دستگاه تغییر می کند، در دستگاه های کوچک چون 100% کمتر از 500px می باشد، به صورت کامل نمایش داده می شود. ولی در دستگاه های بزرگ تر اگر 100% از 500px بزرگ تر باشد، عرض المان، نمی تواند از 500px بزرگ تر شود.

در رابطه با min-width هم این مبحث صدق می کند.

خلاصه درس

در این درس با ویژگی width و ویژگی height در CSS:

  • مقدار کمینه (min) width و height
  • مقدار بیشینه (max) width و height

آشنا شدیم.

توسعه دهندگان
احسان اسلامی