الخاصية min-width

من موسوعة حسوب

الخاصية min-width في CSS تضبط العرض الأدنى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية width من أن تقل عن القيمة المُحدَّدة في الخاصية min-width.

بطاقة الخاصية

القيمة الابتدائية 0
تُطبَّق على جميع العناصر، ما عدا العناصر السطرية غير المُستبدَلة (non-replaced inline elements)، وأعمدة الجداول، ومجموعات الأعمدة.
قابلة للوراثة لا
قابلة للتحريك نعم
القيمة المحسوبة نسبة مئوية أو طول مطلق أو الكلمة المحجوزة auto. 
/* <length> أطوال */
min-width: 3.5em;

/* <percentage> نسب مئوية */
min-width: 75%;

/* كلمات محجوزة */
min-width: none;

/* قيم عامة */
min-width: inherit;
min-width: initial;
min-width: unset;

سيُضبَط عرض العنصر إلى قيمة الخاصية min-width إذا كانت قيمة min-width أكبر من max-width أو width.

أمثلة

سنستخدم في المثال الآتي عنصر <div> عرضه يساوي 30% من عرض العنصر الحاوي عليه، على ألّا يقل عرضه عن قيمة الخاصية min-width ألا وهي 250px:

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

شيفرة CSS:

div {
  width: 30%;
  min-width: 250px;
}

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 1.0 1.0 7.0 7.0 1.0

البنية العامة

auto

القيمة الافتراضية وهي عدم وجود حد أدنى للعرض.

<length>

تحديد العرض الأدنى بالأطوال المطلقة، ولا يجوز استخدام القيم السالبة.

<percentage>

تحديد العرض الأدنى كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي، ولا يجوز استخدام القيم السالبة.

البنية الرسمية

min-width: <length> | <percentage> | auto;

مصادر ومواصفات

مجلوبة من «https://wiki.hsoub.com/index.php?title=CSS/min-width&oldid=12063»