Theme
Primary Color
أكاديمية الزيرو

الدرس 27

المسافات الخارجية وتوسيط العنصر باستخدام margin

معنى المصطلحات

المعنىStand ForName
المسافة الخارجية حوالين العنصرmargin

ال padding بتبعد المحتوى عن أطراف العنصر من جوه أما margin فبتضيف مسافة بره العنصر بينه وبين اللي حواليه

المسافة بين عنصرين

<div class="first-box">First Box</div>
<div class="second-box">Second Box</div>
.first-box {
  background-color: lightblue;
  padding: 20px;
  margin-bottom: 30px;
}

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

هتشوف فراغ 30 بكسل بين العنصرين الفراغ ده خارج الخلفية الزرقاء أما padding فظاهر جواها

كتابة المسافات

/* Top | Right | Bottom | Left */
margin: 10px 20px 30px 40px;

/* Top And Bottom | Right And Left */
margin: 10px 20px;

/* All Sides */
margin: 20px;

الاختصار بنفس ترتيب padding وممكن تكتب كل ناحية لوحدها زي margin-top و margin-left

توسيط عنصر بعرض محدد

جرب المثال ده لوحده

<div class="centered-box">Centered Box</div>
.centered-box {
  width: 240px;
  padding: 20px;
  background-color: #eee;
  margin: 0 auto;
}

القيمة 0 للأعلى والأسفل والقيمة auto بتوزع المساحة الأفقية المتاحة على الناحيتين بالتساوي فيتوسط العنصر طالما المساحة حواليه أكبر من عرضه

جرب بنفسك

غير padding وشوف الخلفية بتزيد من جوه ثم غير margin-bottom وشوف الفراغ بين العنصرين بيزيد من بره

آخر تعديل للدرس: