انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 52
دورة لغة CSS

خاصية min-height للتحكم في أدني طول للعنصر بلغة CSSCSS Min Height

ستتعلم في هذا الدرس التحكم في أدني طول لعناصر HTML باستخدام خاصية min-height في لغة CSS.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
3
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,752
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

CSS Min Height خاصية min-height للتحكم في أدني طول للعنصر بلغة CSS

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

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


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

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

CSS min-width syntax

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

HTML 
min-height:value;

CSS min-height values

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

HTML 
min-height:none|length|initial|inherit;

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

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

CSS min height length

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

HTML 
.max
{
  min-height:100px;
  border: 1px solid red;
}
جرّب بنفسك

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

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

CSS min height percentage

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

HTML 
p
{
  margin:0;
  min-height:50%;
  border: 1px solid red;
}
جرّب بنفسك

مشاركة

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

جارٍ تحميل الآراء…