خاصيتا height و width في CSS تُستخدمان لتحديد ارتفاع وعرض العناصر في صفحة الويب. إليك شرح مُفصّل لهاتين الخاصيتين مع أمثلة:

خاصية width (العرض):
تُستخدم لتحديد عرض العنصر.

يمكن تحديد القيمة بوحدات مختلفة مثل:
px (بكسل): قيمة ثابتة بالبكسل. مثال: width: 200px;
% (نسبة مئوية): نسبة مئوية من عرض العنصر الأب. مثال: width: 50%;
em: نسبة مئوية من حجم خط العنصر نفسه. مثال: width: 10em;
rem: نسبة مئوية من حجم خط العنصر الجذر (html). مثال: width: 10rem;
vw (عرض النافذة): نسبة مئوية من عرض نافذة المتصفح. مثال: width: 50vw;
auto (تلقائي): القيمة الافتراضية، حيث يتحدد العرض تلقائيًا بناءً على محتوى العنصر. مثال: width: auto;

خاصية height (الارتفاع):

تُستخدم لتحديد ارتفاع العنصر.
يمكن تحديد القيمة بوحدات مشابهة لخاصية width:px (بكسل): قيمة ثابتة بالبكسل. مثال: height: 150px;
% (نسبة مئوية): نسبة مئوية من ارتفاع العنصر الأب. مثال: height: 75%; (ملاحظة: تعمل النسب المئوية للارتفاع بشكل صحيح فقط إذا كان للعنصر الأب ارتفاع مُحدّد.)
em: نسبة مئوية من حجم خط العنصر نفسه. مثال: height: 5em;
rem: نسبة مئوية من حجم خط العنصر الجذر (html). مثال: height: 5rem;
vh (ارتفاع النافذة): نسبة مئوية من ارتفاع نافذة المتصفح. مثال: height: 50vh;
auto (تلقائي): القيمة الافتراضية، حيث يتحدد الارتفاع تلقائيًا بناءً على محتوى العنصر. مثال: height: auto;
ملاحظات مهمة
صندوق المحتوى (Content Box): القيم التي تُحدّدها لـ width و height تُطبّق على محتوى العنصر فقط. لا تشمل الحواف (padding) أو الحدود (border) أو الهوامش (margin).
نموذج الصندوق (Box Model): لفهم كيفية احتساب حجم العنصر بشكل كامل، من المهم فهم نموذج الصندوق في CSS، الذي يشمل المحتوى، الحواف، الحدود، والهوامش.
box-sizing: خاصية box-sizing تُغيّر كيفية احتساب حجم العنصر. القيمة border-box تجعل width و height يشملان الحواف والحدود، مما يُسهّل التحكم في حجم العناصر. يُنصح باستخدامها بشكل عام:

الصور: بالنسبة للصور، تُستخدم خاصيتا width و height لتغيير حجم الصورة. إذا تم تحديد قيمة واحدة فقط (إما width أو height)، فسيتم تغيير حجم البُعد الآخر بشكل تناسبي للحفاظ على نسبة العرض إلى الارتفاع الأصلية للصورة.
العناصر المُضمنة (Inline Elements): لا تُطبّق خاصيتا width و height على العناصر المُضمنة بشكل افتراضي (مثل <span> و <a>). لتطبيقها، يجب تغيير نوع العرض للعنصر باستخدام خاصية display إلى inline-block أو block.

باستخدام هذه المعلومات والأمثلة، يمكنك التحكم بدقة في أبعاد العناصر في تصميماتك.