min-width Property
ویژگی min-width
در CSS کمترین اندازه عرض عنصر را مشخص می کند. اگر اندازه عرضِ محتوایِ عنصر بیشتر از مقدار تعیین شده توسط ویژگی min-width
باشد، این ویژگی فعال نخواهد شد.
نحوه نوشتار
/* استفاده از واحد های اندازه (طول) */ min-height: 3.5em; /* مقدار با درصد */ min-height: 75%; /* مقدار یا کلیدواژه */ min-height: none;
مقادیر
عرض (واحدهای اندازه)
کمترین اندازه عرض توسط مقادیری بر اساس px,
cm
, rem
و .. مشخص می شود. مقدار پیشفرض 0
می باشد.
درصد
کمترین اندازه عرض را بر حسب درصدی از عرض عنصر والد تعیین می کند.
auto
اندازه این ویژگی را مرورگر محاسبه و اعمال می کند.
در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
در این مثال میبینیم که در عناصر سبز و صورتی ویژگی display:inline-block
تعریف شده است.
پس در این عناصر بنا بر خصوصیت inline-block
حداکثر اندازه عرض، برابر با اندازه محتوای آن است. در عنصر آبی ویژگی display: block
تعیین شده است و بنابر خصوصیت block
اندازه عرض پیشفرض عنصر به اندازه تمام عرض عنصر والد است، پس در اینجا ویژگی min-width
تاثیری نخواهد شد.
html
<div class="box1">این یک متن نمونه است.</div> <br /> <div class="box2">این یک متن نمونه است.</div> <div class="box3">این یک متن نمونه است.</div>
css
div { display: inline-block; margin-top: 15px; } .p1 { background-color: lightgreen; min-width: 300px; } .p2 { background-color: pink; min-width: 5px; } .p3 { display: block; background-color: lightblue; min-width: 300px; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی CSS پشتیبانی می کنند.