CSS

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

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

التاريخ

17 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

692

المواضيع

24
الشروحات chevron_left CSS Min Height chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

</> 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.

min-height:value;
CSS min-height values

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

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.

.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.

p
{
  margin:0;
  min-height:50%;
  border: 1px solid red;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.