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

مقدار طولی

مقدار درصدی

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