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

الدرس 26

المسافات الداخلية باستخدام padding

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

المعنىStand ForName
المسافة الداخلية بين المحتوى وحد العنصرpadding

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

مسافة داخلية من كل ناحية

استخدم المثال ده مكان عنصر التجربة

<div class="box">Learning CSS Is Fun</div>
.box {
  background-color: #eee;
  padding: 20px;
}

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

كل ناحية لوحدها

.box {
  background-color: #eee;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

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

padding: 10px 20px 30px 40px;

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

قيمة أو اتنين أو تلاتة

/* All Sides */
padding: 20px;

/* Top And Bottom | Right And Left */
padding: 10px 30px;

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

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

إلغاء مسافة ناحية واحدة

.box {
  background-color: #eee;
  padding: 20px;
  padding-left: 0;
}

الناحية الشمال بقت من غير مساحة داخلية وباقي النواحي زي ما هي

جرب بنفسك

خلي المسافة من فوق وتحت 15 بكسل ومن اليمين والشمال 25 بكسل ثم اكتب نفس النتيجة باستخدام الأربع خواص المنفصلة

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