الفصل 7: عرض العناصر (Display)

بالعامية المصرية – inline و block و inline-block و none

---

🎯 يعني إيه Display أصلاً؟

كل عنصر في HTML ليه طريقة افتراضية في العرض، يعني:

• في عناصر بتتعرض كـ سطر (زي <span>, <a>)
• وعناصر تانية بتاخد صف كامل لوحدها (زي <div>, <p>, <h1>)

وإنت بقى تقدر تتحكم في ده عن طريق خاصية display في CSS.

---

1️⃣ display: block;

يعني العنصر بيظهر على سطر لوحده وياخد العرض بالكامل.

📌 أمثلة على عناصر بتكون Block بشكل افتراضي:

• <div>
• <p>
• <h1> لحد <h6>
• <section>, <article>, <header>, إلخ

cssCopy codediv {
  display: block;
}

🎯 النتيجة:

• بياخد عرض الصفحة كله
• العنصر اللي بعده بييجي تحته

---

2️⃣ display: inline;

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

📌 أمثلة على عناصر Inline:

• <span>
• <a>
• <strong>, <em>, <label>

cssCopy codespan {
  display: inline;
}

⚠️ بس خلي بالك:
ما تقدرش تضيف width أو height على عنصر inline.

---

3️⃣ display: inline-block;

ده بقى نص ونص 🔥
يعني العنصر يفضل جنب اللي قبله، بس في نفس الوقت تقدر تتحكم في:

• width
• height
• padding
• margin

وده بيخليه مفيد جدًا في تصميم الـ buttons أو الكروت الصغيرة.

cssCopy code.button {
  display: inline-block;
  width: 150px;
  height: 50px;
  background-color: blue;
  color: white;
  text-align: center;
}

---

4️⃣ display: none;

ده بيخفي العنصر تمامًا وكأنّه مش موجود في الصفحة.

cssCopy code.ad {
  display: none;
}

⛔ الفرق بينه وبين visibility: hidden إن:

• display: none بيشيل العنصر من الصفحة تمامًا
• visibility: hidden بيخفيه بس بيسيب مكانه

---

💡 مثال توضيحي سريع:

htmlCopy code<div class="box1">Block Element</div>
<span class="box2">Inline Element</span>
<div class="box3">Inline-block Element</div>

cssCopy code.box1 {
  display: block;
  background-color: lightblue;
}

.box2 {
  display: inline;
  background-color: lightgreen;
}

.box3 {
  display: inline-block;
  width: 200px;
  height: 50px;
  background-color: orange;
}

---

🧠 مقارنة سريعة:

النوع	يشتغل على سطر لوحده؟	ينفعله width/height؟	يفضل جنبه عناصر تانية؟
block	✅	✅	❌
inline	❌	❌	✅
inline-block	❌	✅	✅
none	❌	❌	❌ (العنصر مش ظاهر)