min-width

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

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

در مثال زیر درون عنصر محتوای کمی وجود دارد و عنصر عرض همان محتوا را خواهد داشت:

حال اگر بخواهیم تا حداقل عرض عنصر 300 پیکسل باشد چه؟ کافی است بصورت زیر عمل کنیم:

.element {
  min-width: 300px;  
}

همچنین اگر محتوای عنصر بیشتر از 300 پیکسل باشد مشکلی بوجود نمی آید چون ما حداقل عرض را مشخص کرده ایم و عرض بیشینه را آزاد گذاشته ایم:

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

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

span {
  display: inline-block;
  min-width: 100px;
}

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

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

مقدار طولی

به کمک واحدهای مطلق و نسبی می توان به این ویژگی مقدار داد.

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

مقدار درصدی

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

.dad {
  width: 100px;
}

.dad .boy {
  min-width: 10%; /* 10px */
}

inherit

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