CSS

CSS Height
خاصية height للتحكم في طول العناصر في لغة CSS

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

التاريخ

11 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

797

المواضيع

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

CSS Heigh
طول العناصر في لغة CSS

</> CSS Heigh
طول العناصر في لغة CSS

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


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

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

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

height:value;
CSS height values

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

height:auto|length|percentage|initial|inherit;
مهم
طول العنصر لا يشمل المساحات الخاصة margin الهوامش الخارجية و padding الهوامش الداخلية و borders الإطار الداخلي, يتم إضافة مساحة الطول داخل العنصر أسفل margin و padding و borders.

</> CSS height auto
خاصية height مع القيمة auto في لغة CSS

يتم إحتساب طول العنصر بواسطة المتصفح تلقائياً مع إضافة خاصية height مع القيمة auto في لغة CSS.
CSS height auto

خاصية height والقيمة auto في لغة CSS.

p 
{
  height: auto;
  border: 1px solid red;
}

</> CSS height length
خاصية height مع القيمة length في لغة CSS

يتم إحتساب طول العنصر بوحدات مختلفة مثل pixel البيكسل مع إضافة خاصية height مع القيمة length في لغة CSS.
CSS height length

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

p 
{
  height:100px;
  border: 1px solid red;
}

</> CSS height percentage
خاصية height مع القيمة percentage في لغة CSS

يتم إحتساب طول العنصر بالنسبة المئوية مع إضافة خاصية height مع القيمة percentage % في لغة CSS.
CSS height percentage

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

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