خاصية min-width للتحكم في أدني عرض للعنصر بلغة CSS

في هذا الدرس 3تصفّح المواضيع

CSS Min Width خاصية min-width للتحكم في أدني عرض للعنصر بلغة CSS

تستخدم خاصية min-width في ضبط + التحكم في أدني عرض ممكن لعناصر HTML علي المتُصفح بلغة CSS, لو قل حجم محتوي العنصر علي أقل من القيمة الموجودة بداخل خاصية min-width فستعمل خاصية min-height بشكل طبيعي.

إذا كان المحتوي أقل من عرض العنصر فأن خاصية min-width تؤثر علي العنصر ويكون لها وظيفة في هذة الحالة.
في حال أن محتوي العنصر أطول من القيمة الموجودة في min-width فأن خاصية min-width لا تعمل ولا تؤثر علي العرض.
قيمة خاصية width إذا كانت أصغر من القيمة الموجودة في خاصية min-width لا تعمل ولا تؤثر علي عرض العنصر.

قيم خاصية min-width في لغة CSS:

length ضبط أدني عرض للعنصر بوحدات مختلفة مثل px,cm,em,rem.
percentage ضبط أدني عرض للعنصر بالنسبة المئوية % علي حسب العنصر الأب parent.

CSS min-width syntax

طريقة كتابة خاصية min-width في لغة CSS.

HTML

min-width:value;

CSS min-width values

قيم خاصية min-width في لغة CSS.

HTML

min-width:none|length|initial|inherit;

CSS min-width length خاصية min-width مع القيمة length في لغة CSS

يكون للعنصر أقل عرض ممكن إذا قل حجم المحتوي عن عرض العنصر عن طريقة خاصية min-width في لغة CSS وهو الحد الأدني للعرض لا يقل عن القيمة الموجدة داخل خاصية min-width.

جرّب بنفسك

CSS min width length

خاصية min-width والقيمة length في لغة CSS.

HTML

p
{
  min-width:400px;
  width:100px;
  border: 1px solid red;
}

جرّب بنفسك

CSS min width percentage خاصية min-width مع القيمة percentage في لغة CSS

يتم إحتساب أقل عرض للعنصر بالنسبة المئوية مع إضافة خاصية min-width مع القيمة percentage % في لغة CSS من حجم parent Element العنصر الأب.

جرّب بنفسك

CSS min width percentage

خاصية min-width والقيمة percentage في لغة CSS.

HTML

p
{
  margin:0;
  width:10px;
  min-width:50%;
  border: 1px solid red;
}

جرّب بنفسك

خاصية min-width للتحكم في أدني عرض للعنصر بلغة CSSCSS Min Width

CSS Min Width خاصية min-width للتحكم في أدني عرض للعنصر بلغة CSS

CSS min-width syntax

CSS min-width values

CSS min-width length خاصية min-width مع القيمة length في لغة CSS

CSS min width length

CSS min width percentage خاصية min-width مع القيمة percentage في لغة CSS

CSS min width percentage

سجّل الدخول لحفظ تقدمك

خاصية min-width للتحكم في أدني عرض للعنصر بلغة CSSCSS Min Width

CSS Min Width خاصية min-width للتحكم في أدني عرض للعنصر بلغة CSS

CSS min-width syntax

CSS min-width values

CSS min-width length خاصية min-width مع القيمة length في لغة CSS

CSS min width length

CSS min width percentage خاصية min-width مع القيمة percentage في لغة CSS

CSS min width percentage

مشاركة

هل كان هذا الدرس مفيدًا؟

سجّل الدخول لحفظ تقدمك