الفصل 6: الحدود (Borders) والمسافات – border / margin / padding

(بالعامية المصرية)

---

🎯 الأول كده… إيه الفرق بينهم؟

الخاصية	معناها بالعربي	بتتحكم في إيه؟
border	الحد	بيعمل إطار حوالين العنصر
padding	الحشوة	المسافة بين محتوى العنصر وحدوده
margin	الهامش	المسافة بين العنصر والعناصر اللي حواليه

---

🟥 أولًا: border – الإطار حوالين العنصر

تقدر تضيف إطار حوالين أي عنصر وتتحكم في شكله ولونه وسمكه.

cssCopy codediv {
  border: 2px solid black;
}

🔍 ده معناه:

• 2px: السمك
• solid: نوع الخط (فيه dashed، dotted، double…)
• black: لون الإطار

📌 أنواع الحدود:

• solid = خط عادي
• dashed = خط متقطع
• dotted = نقط
• double = خطين

---

🟨 تقدر تحدد كل جهة لوحدها:

cssCopy codediv {
  border-top: 1px solid red;
  border-right: 2px dashed green;
  border-bottom: 3px dotted blue;
  border-left: 4px solid gray;
}

---

🟩 ثانيًا: padding – المسافة جوا العنصر

دي بتحدد المسافة بين حدود العنصر والمحتوى اللي جواه.

cssCopy codediv {
  padding: 20px;
}

📌 كل ما تزود الـ padding، الكلام أو الصورة اللي جوا هتبعد أكتر عن الحافة.

ممكن كمان تحدد كل اتجاه لوحده:

cssCopy codediv {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

أو بطريقة مختصرة:

cssCopy codepadding: 10px 20px 10px 20px; /* top right bottom left */

---

🟦 ثالثًا: margin – المسافة حوالين العنصر من برة

cssCopy codediv {
  margin: 30px;
}

ده بيخلي العنصر يبعد عن العناصر اللي حواليه.

بردو ينفع تحدد الاتجاهات:

cssCopy codemargin-top: 10px;
margin-bottom: 20px;

أو تختصر زي padding:

cssCopy codemargin: 10px 15px; /* top & bottom = 10px, right & left = 15px */

---

💡 مثال عملي:

htmlCopy code<div class="box">
  <h2>عنوان</h2>
  <p>نص تجريبي جوا صندوق</p>
</div>

cssCopy code.box {
  border: 2px solid #333;
  padding: 20px;
  margin: 30px;
  background-color: #f9f9f9;
}

🔸 النتيجة:

• في إطار حوالين الصندوق
• المحتوى واخد راحته جوا
• الصندوق نفسه مش لازق في اللي فوقه أو تحته

---

🎯 نصايح سريعة:

• padding بيأثر على حجم العنصر، margin لأ
• ممكن تستخدمهم سوا لتنظيم الشكل كويس
• استخدم أدوات زي Chrome DevTools علشان تشوف الـ Box Model قدامك