الدرس 28

اندماج المسافات الخارجية Margin Collapse

يعني إيه Margin Collapse

ال Margin Collapse معناها إن مسافتين خارجيتين رأسيتين ممكن يندمجوا في مسافة واحدة بدل ما يتجمعوا خلينا نجرب بأرقام موجبة بسيطة علشان النتيجة تبقى واضحة

عنصرين تحت بعض

<div class="first-box">First Box</div>
<div class="second-box">Second Box</div>

.first-box {
  padding: 20px;
  background-color: lightblue;
  margin-bottom: 30px;
}

.second-box {
  padding: 20px;
  background-color: lightgreen;
  margin-top: 20px;
}

كنت متوقع كام والنتيجة كام

العنصر الأول عنده مسافة من تحت 30 بكسل والعنصر التاني عنده مسافة من فوق 20 بكسل ممكن تتوقع إن الفراغ بينهم 50 بكسل لكن في المثال ده المسافتين بيلتقوا وبيحصل Margin Collapse فتكون النتيجة 30 بكسل وهي الأكبر

First Bottom Margin: 30px
Second Top Margin:   20px
Actual Gap:         30px

الاندماج هنا بين المسافة اللي تحت العنصر الأول واللي فوق العنصر التاني مش بين أي مسافتين في الصفحة

لما المسافتين يبقوا متساويين

غير margin-top في العنصر التاني إلى 30px

.second-box {
  padding: 20px;
  background-color: lightgreen;
  margin-top: 30px;
}

المسافة هتفضل 30 بكسل مش 60 لأن القيمتين اندمجوا في مسافة واحدة

جرب القيم وقارن

المسافة الفعلية	Second Margin Top	First Margin Bottom
30 بكسل	20px	30px
30 بكسل	30px	30px
50 بكسل	50px	30px
30 بكسل	0	30px

الجدول خاص بنفس المثال وبالقيم الموجبة أو الصفر الظاهرة فيه

لو عاوز الفراغ يبقى 50 بكسل

خلي التحكم في الفراغ من ناحية واحدة بدل توزيع الرقم على مسافتين متقابلتين

.first-box {
  padding: 20px;
  background-color: lightblue;
  margin-bottom: 50px;
}

.second-box {
  padding: 20px;
  background-color: lightgreen;
  margin-top: 0;
}

كده الفراغ بين العنصرين 50 بكسل والرقم المسؤول عنه موجود في مكان واحد

هل padding بتندمج كمان

لا ال padding مسافة داخلية ومش بيحصل لها Margin Collapse في مثالنا كل عنصر لسه محتفظ بالمسافة الداخلية 20 بكسل حتى لما المسافتين الخارجيتين اندمجوا

ال margin-left و margin-right مش بيحصل لهم الاندماج الرأسي اللي بنشرحه هنا

مثال بين الأب وأول ابن

جرب المثال ده لوحده مكان العنصرين

<div class="parent">
  <div class="child">Child Box</div>
</div>

.parent {
  background-color: lightblue;
}

.child {
  margin-top: 30px;
  padding: 20px;
  background-color: lightgreen;
}

رغم إنك كتبت margin-top على الابن مش هتشوف مساحة زرقاء فوقه جوه الأب في المثال ده مفيش محتوى أو padding أو حد من فوق يفصل بينهم فمسافة الابن العلوية بتندمج مع مسافة الأب وتظهر بره الأب

لو المطلوب مساحة داخل الأب

استخدم padding للأب وشيل المسافة الخارجية من الابن

.parent {
  background-color: lightblue;
  padding-top: 30px;
}

.child {
  margin-top: 0;
  padding: 20px;
  background-color: lightgreen;
}

دلوقتي هتشوف مساحة زرقاء 30 بكسل فوق الابن لأنها مساحة داخلية في الأب

جرب بنفسك

في مثال العنصرين خلي مسافة الأول من تحت 40px ومسافة التاني من فوق 15px وتوقع الفراغ قبل ما تفتح المتصفح ثم خلي مسافة التاني 60px وقارن النتيجة

وفي مثال الأب قارن margin-top على الابن مع padding-top على الأب وركز على مكان ظهور الخلفية الزرقاء

آخر تعديل للدرس: 13/10/2026