شرح خصائص CSS Width و Height للتحكم في أبعاد العناصر خطوة بخطوة

شرح خصائص CSS Width و Height بالتفصيل

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

ما هي خاصية CSS Width؟

خاصية width بتتحكم في عرض العنصر داخل صفحة الويب. وهي بتحدد المساحة الأفقية الخاصة بمنطقة المحتوى content area فقط. يعني إن أي padding أو border أو margin مش بيتم احتسابهم داخل القيمة اللي بتحددها في width. القيم الممكنة للعرض هي:

auto: القيمة الافتراضية، والمتصفح بيحدد العرض المناسب تلقائيًا.
length: ممكن تستخدم وحدات قياس زي px أو cm أو em.
percentage (%): بتحدد العرض كنسبة مئوية من عرض العنصر الأب.
inherit: العنصر بيورث قيمة العرض من الأب.

ما هي خاصية CSS Height؟

خاصية height بتحدد ارتفاع العنصر (المساحة الرأسية). زي width، القيمة بتنطبق على المحتوى فقط بدون padding أو border أو margin. القيم الخاصة بالارتفاع هي نفسها القيم الخاصة بالعرض:

auto: المتصفح بيحسب الارتفاع تلقائيًا.
length: زي 100px أو 20em.
percentage (%): نسبة من ارتفاع العنصر الأب.
inherit: بياخد القيمة من العنصر الأب.

أمثلة عملية على Width و Height

فيما يلي بعض الأمثلة اللي بتوضح كيفية تطبيق الخصائص:

div {
  width: 300px;
  height: 200px;
  background-color: lightblue;
}

في المثال السابق، العنصر div هيكون عرضه 300 بكسل وارتفاعه 200 بكسل، وده بيدي مساحة ثابتة.

div {
  width: 50%;
  height: 100px;
  background-color: lightgreen;
}

هنا العرض بيساوي 50% من العنصر الأب. يعني لو العنصر الأب عرضه 800px، العرض النهائي للعنصر ده هيكون 400px.

div {
  width: auto;
  height: auto;
}

لما نستخدم auto، المتصفح هو اللي بيقرر العرض والارتفاع المناسبين حسب المحتوى وحسب المساحة المتاحة.

العلاقة بين Width و Height ونموذج الصندوق (Box Model)

مهم جدًا تفهم إن القيم اللي بتحددها للعرض والطول بتنطبق على منطقة المحتوى فقط. لو ضفت padding أو border أو margin، الحجم الفعلي للعنصر هيكون أكبر. على سبيل المثال:

div {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
}

في الحالة دي، العرض الكلي = 300 + 40 (padding يمين ويسار) + 10 (border يمين ويسار) = 350px. والارتفاع الكلي = 200 + 40 (padding فوق وتحت) + 10 (border فوق وتحت) = 250px.

استخدام Width و Height مع الصور

من أكتر الأمثلة شيوعًا لاستخدام width و height هو ضبط أبعاد الصور. مثلًا:

img {
  width: 200px;
  height: 150px;
}

لكن لازم تخلي بالك، لو غيرت نسبة العرض للارتفاع بشكل غير متناسب، الصورة ممكن تظهر مشوهة. علشان كده الأفضل تحديد عرض فقط أو ارتفاع فقط، والمتصفح بيحسب القيمة التانية تلقائيًا.

أفضل الممارسات عند استخدام Width و Height

استخدم النسب المئوية (%) لما تحب تصمم موقع متجاوب.
تجنب تحديد قيم ثابتة كتير علشان الموقع يفضل مرن.
لو محتاج ثبات في الشكل، px ممكن يكون مناسب.
للمشاريع الحديثة، دايمًا راعي الشاشات الصغيرة وجرّب التصميم على الموبايل.

خاتمة

خصائص width و height من أهم أساسيات CSS. باستخدامهم بشكل صحيح، تقدر تتحكم بشكل كامل في أبعاد العناصر وتخلي التصميم متجاوب مع كل أنواع الشاشات. لازم دايمًا تفكر في الـ Box Model، وتعرف إن القيم دي خاصة بالمحتوى فقط. ومع الممارسة، هتلاقي إنك تقدر تصمم مواقع متناسقة وجذابة بسهولة.