CSS: العرض والارتفاع Width و Height

مفهوم العرض والارتفاع في CSS

يعتبر التحكم في أبعاد العناصر باستخدام خصائص العرض والارتفاع من أهم الأساسيات في تصميم صفحات الويب باستخدام CSS. تتيح لك خاصية العرض (Width) تحديد المساحة الأفقية التي يشغلها العنصر، بينما تتيح خاصية الارتفاع (Height) ضبط المساحة العمودية له. يمكن تعيين القيم بوحدات قياس مختلفة مثل البيكسل (px) أو النسبة المئوية (%).

كيفية استخدام العرض والارتفاع في CSS

عند تصميمك لواجهة المستخدم، قد تحتاج إلى تحديد عرض وارتفاع معينين للعناصر لتتناسب مع تخطيط الصفحة. يمكنك ببساطة استخدام الخصائص في ملفات CSS الخاصة بك لضبط الأبعاد. فمثلاً، إذا كنت ترغب في تعيين عرض عنصر إلى 200 بيكسل وارتفاعه إلى 150 بيكسل، يمكنك القيام بذلك باستخدام الكود التالي:

.my-element {
        width: 200px;
        height: 150px;
    }

استخدام العرض والارتفاع بالنسب المئوية

يمكن أيضًا استخدام النسب المئوية في تحديد العرض والارتفاع لجعل التصميم أكثر استجابة. تعتمد النسبة المئوية للعرض على عرض العنصر الأب، بينما تعتمد النسبة المئوية للارتفاع على ارتفاع العنصر الأب أيضًا. على سبيل المثال، إذا كنت ترغب في أن يمتد العنصر إلى نصف عرض العنصر الأب، يمكن تعيين العرض إلى 50%:

.responsive-element {
        width: 50%;
        height: 100px;
    }

أمثلة تطبيقية لاستخدام العرض والارتفاع

في بعض الأحيان، قد ترغب في تحديد أبعاد الحد الأدنى أو الحد الأقصى للعناصر باستخدام خصائص مثل min-width وmax-width. هذه الخصائص مفيدة لضمان أن العناصر لا تصبح أصغر أو أكبر مما ينبغي عند تغيير حجم نافذة المتصفح. على سبيل المثال:

.limited-element {
        min-width: 100px;
        max-width: 300px;
        height: 200px;
    }

من المهم أن تكون على دراية بكيفية تأثير خصائص العرض والارتفاع على تخطيط الصفحة، خاصة عند التعامل مع عناصر تحتوي على محتوى ديناميكي أو تستجيب لأجهزة مختلفة. يتيح لك الفهم الجيد لهذه الخصائص إنشاء تصميمات متجاوبة وجذابة.