ویژگی min-width در CSS

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 پشتیبانی می کنند.