همه چیز درباره ی max-width,min-width

max-width:

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

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

با استفاده از ویژگی min-width و max-width می توان برای عرض یک عنصر محدوده تعیین کرد.

برای عناصر خطی مثل <a> و یا <span> ویژگی max-width هیچ تاثیری روی آنها نخواهد گذاشت. برای اینکه بتوان از طریق این ویژگی عرض اینگونه عناصر را کنترل کرد باید توسط ویژگی display این عناصر را از حالت خطی خارج کنیم. مثلا می توان display آنها را تبدیل به block و یا inline-block کرد.

مقادیر ویژگی max-width:

max-width: <length> | <percentage> | inherit

مقدار طولی

;max-width: 100px
;max-width: 4rem
;max-width: 10vh
;max-width: 100cm

مقدار درصدی

اگر از مقادیر درصدی استفاده کنیم مرورگر مقدار را نسبت به عرض نگهدارنده یا همان پدر عنصر تعیین می کند.

inherit

با استفاده از کلمه کلیدی inherit مقدار max-width عنصر برابر با مقدار ویژگی max-width عنصر پدر خواهد بود.

min-width:

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

با استفاده از min-width و ویژگی max-width می توان برای عرض یک عنصر محدوده تعیین کرد.

برای عناصر خطی مثل <a> و یا <span> ویژگی min-width هیچ تاثیری روی آنها نخواهد گذاشت. برای اینکه بتوان از طریق این ویژگی عرض اینگونه عناصر را کنترل کرد باید توسط ویژگی display این عناصر را از حالت خطی خارج کنیم. مثلا می توان display آنها را تبدیل به block و یا inline-block کرد.

مقادیر ویژگی min-width:

min-width: <length> | <percentage> | inherit

مقدار طولی

مقدار درصدی

مقدار عنصر پدر