CSS

CSS Width
خاصية width للتحكم في عرض العناصر في لغة CSS

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

التاريخ

01 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2356

المواضيع

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

CSS Width
خاصية width للتحكم في عرض العناصر في لغة CSS

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> CSS Width
خاصية width للتحكم في عرض العناصر في لغة CSS

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


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

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

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

width:value;
CSS width values

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

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

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

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

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

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

span
{
  width: auto;
  border: 1px solid blue;
}

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

يتم إحتساب عرض العنصر بوحدو بيكسل أو أي وحدات أخري مثل cm,em مع إضافة خاصية width مع القيمة lentgh في لغة CSS.
CSS width length

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

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

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

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

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

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