🎯 التحكم في الأبعاد: دليلك الشامل لخاصيتي Height و Width في CSS

مرحباً بك في درس جديد من دروس CSS! اليوم سنتعلم كيفية التحكم في حجم العناصر على صفحتك باستخدام خاصيتين أساسيتين وهما height (الارتفاع) و width (العرض). هذه الخصائص هي من بين أولى الأدوات التي ستستخدمها لبناء وتصميم تخطيط صفحتك بالشكل الذي تريده.

📏 ما هي خاصية Width (العرض)؟

خاصية width تُستخدم لتحديد عرض العنصر. يمكنك تخيلها كالمسافة من الحافة اليسرى للعنصر إلى حافته اليمنى.

/* مثال على تحديد عرض عنصر */
.my-box {
  width: 300px; /* يعين عرض العنصر ليكون 300 بكسل */
}

📐 ما هي خاصية Height (الارتفاع)?

خاصية height تُستخدم لتحديد ارتفاع العنصر. يمكنك تخيلها كالمسافة من الحافة العلوية للعنصر إلى حافته السفلية.

/* مثال على تحديد ارتفاع عنصر */
.my-box {
  height: 150px; /* يعين ارتفاع العنصر ليكون 150 بكسل */
}

🔢 الوحدات المستخدمة مع Height و Width

لا نحدد الأبعاد بالأرقام فقط، بل يجب أن نحدد وحدة القياس. إليك أكثر الوحدات شيوعاً للمبتدئين:

1. البكسل (Pixels - px)

هي الوحدة الأكثر استخداماً وثباتاً. البكسل يمثل نقطة واحدة على الشاشة.

.box {
  width: 200px;  /* عرض ثابت مقداره 200 بكسل */
  height: 100px; /* ارتفاع ثابت مقداره 100 بكسل */
}

2. النسبة المئوية (%)

تحدد حجم العنصر كنسبة مئوية من حجم العنصر الأب (الوالد) الذي يحتويه.

.child-box {
  width: 50%; /* سيكون عرض هذا العنصر نصف عرض العنصر الأب */
  height: 75%; /* سيكون ارتفاع هذا العنصر ثلاثة أرباع ارتفاع العنصر الأب */
}

💡 مثال عملي مبسط: إنشاء صندوق بابعاد محددة

لنطبق ما تعلمناه بإنشاء صندوق بسيط بلون خلفية لتسهيل رؤية تأثيره على الصفحة.

<!DOCTYPE html>
<html>
<head>
<style>
  /* تعريف نمط الصندوق */
  .custom-box {
    width: 400px;   /* تحديد العرض */
    height: 200px;  /* تحديد الارتفاع */
    background-color: lightblue; /* إضافة لون خلفية للتوضيح */
    border: 2px solid darkblue; /* إضافة حدود للتوضيح */
  }
</style>
</head>
<body>
  <!-- العنصر في الصفحة -->
  <div class="custom-box">هذا صندوق بأبعاد 400x200 بكسل.</div>
</body>
</html>

في هذا المثال، قمنا بإنشاء <div> وسميناه بـ custom-box. باستخدام CSS، حددنا له عرض 400 بكسل وارتفاع 200 بكسل، وأضفنا لون خلفية وحواف لتوضيح مساحته.

⚠️ ملاحظات هامة للمبتدئين

  1. القيم الافتراضية: معظم العناصر مثل <div> يأخذ عرضاً بنسبة 100% من العنصر الأب تلقائياً، بينما يكون ارتفاعه فقط بقدر المحتوى الذي بداخله ما لم تحدده أنت.
  2. المحتوى هو الأساس: إذا حددت ارتفاعاً (height) ثابتاً صغيراً جداً، وقد يكون النص بداخله طويلاً، فقد يخرج النص من حدود الصندوق. سنتعلم لاحقاً كيفية التحكم في هذا.
  3. البداية البسيطة: ابدأ باستخدام وحدات px و % فهي الأسهل لفهمها كمرحلة أولى.