CSS Width
خاصية width للتحكم في عرض العناصر في لغة CSS
ستتعلم في هذا الدرس التحكم في عرض عناصر HTML بأستخدام خاصية height, كما يمكن إعادة ضبط عرض العناصر في لغة CSS.
التاريخ
01 نوفمبر 2021
الدروس
137
المستوى
مبتدئ
اللغة
انجليزي
المشاهدات
2472
المواضيع
24
CSS Width
خاصية width للتحكم في عرض العناصر في لغة CSS
</>
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; }