المسافات الداخلية في CSS

هوامش العنصر هذا هي 70px.

المسافات الداخلية في CSS

CSS padding الخصائص تُستخدم لإنشاء مساحة حول محتوى العنصر في الحدود المحددة.

من خلال CSS، يمكنك التحكم بشكل كامل في الهوامش الداخلية (الملء). بعض الخصائص تُستخدم لتعيين الهوامش الداخلية لأي جانب من جوانب العنصر (العمودية والافقية).

Padding - الجوانب الفردية

CSS يمتلك خصائص تُستخدم لتعيين الهوامش الداخلية لأي جانب من جوانب العنصر:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

يمكن تكوين جميع خصائص الهوامش الداخلية بالقيم التالية:

  • length - تحديد الهوامش الداخلية بوحدات مثل px،pt،cm إلخ
  • % - تحديد الهوامش الداخلية بناءً على نسبة عرض العنصر
  • inherit - تحديد أن الهوامش الداخلية يجب أن تُورث من العنصر الأب

نصيحة:لا يُسمح بالقيم السلبية.

مثال

إعداد الهوامش الداخلية المختلفة لأربعة جوانب من <div> العنصر:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

جرب بنفسك

Padding - خاصية اختصار

للتحفيظ الكود، يمكنك تحديد جميع خصائص الهوامش الداخلية في خاصية واحدة.

padding الخصائص هي اختصار لخصائص الرفوف الداخلية التالية:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

هذا هو كيفية عمله:

إذا padding الخصائص تحتوي على أربعة قيم:

  • padding: 25px 50px 75px 100px;
    • الرفوف الداخلية العلوية هي 25px
    • الرفوف الداخلية اليمنى هي 50px
    • الرفوف الداخلية السفلية هي 75px
    • الرفوف الداخلية اليسرى هي 100px

مثال

استخدام خصائص padding القصيرة التي تم تعيينها أربعة قيم:

div {
  padding: 25px 50px 75px 100px;
}

جرب بنفسك

إذا padding الخصائص تم تعيينها ثلاثة قيم:

  • padding: 25px 50px 75px;
    • الرفوف الداخلية العلوية هي 25px
    • الرفوف الداخلية اليمنى واليسرى هي 50px
    • الرفوف الداخلية السفلية هي 75px

مثال

استخدام خصائص padding القصيرة التي تم تعيينها ثلاثة قيم:

div {
  padding: 25px 50px 75px;
}

جرب بنفسك

إذا padding الخصائص تم تعيينها قيمتين:

  • padding: 25px 50px;
    • الرفوف الداخلية العلوية والسفلية هي 25px
    • الرفوف الداخلية اليمنى واليسرى هي 50px

مثال

استخدام خصائص padding القصيرة التي تم تعيينها قيمتين:

div {
  padding: 25px 50px;
}

جرب بنفسك

إذا padding الخصائص تم تعيينها قيمة واحدة:

  • padding: 25px;
    • جميع أربعة الرفوف الداخلية هي 25px

مثال

استخدام خصائص padding القصيرة التي تم تعيينها قيمة لها:

div {
  padding: 25px;
}

جرب بنفسك

الرفوف الداخلية وعرض العنصر

CSS width الخصائص تحدد عرض منطقة المحتوى للعنصر. منطقة المحتوى هي الجزء الذي يحتوي على الرفوف الداخلية والهوامش والهوامش للعنصر (نموذج الصندوق).

لذلك، إذا كان العنصر يحتوي على عرض محدد، فإن إضافة رفوف داخلي إلى العنصر سيضيف إلى عرض العنصر الكلي. هذا عادة ما يكون نتيجة غير مرغوب فيها.

مثال

في هذا المثال، عرض العنصر <div> هو 300px. ولكن، عرض العنصر <div> الفعلي سيكون 350px (300px + رفوف داخلية يسار 25px + رفوف داخلية يمين 25px):

div {
  width: 300px;
  padding: 25px;
}

جرب بنفسك

إذا كنت ترغب في الحفاظ على العرض عند 300px، بغض النظر عن حجم الرفوف، يمكنك استخدام box-sizing الخصائص. هذا سيسمح للعنصر بالحفاظ على عرضه. إذا تم إضافة رفوف داخلي، فإن مساحة المحتوى المتاحة ستقل.

مثال

استخدام خاصية box-sizing لتحافظ على العرض عند 300px، بغض النظر عن حجم الرفوف:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

جرب بنفسك

مزيد من الأمثلة

إعداد الرفوف الداخلية اليسرى
هذا المثال يوضح كيفية إعداد الرفوف الداخلية اليسرى للعنصر <p>.
إعداد الرفوف الداخلية اليمنى
هذا المثال يوضح كيفية إعداد الرفوف الداخلية اليمنى للعنصر <p>.
إعداد الرفوف الداخلية العلوية
هذا المثال يوضح كيفية إعداد الرفوف الداخلية العلوية للعنصر <p>.
إعداد الرفوف الداخلية السفلية
هذا المثال يوضح كيفية إعداد الرفوف الداخلية السفلية للعنصر <p>.

جميع خصائص الرفوف الداخلية CSS

الخصائص الوصف
padding الخصائص القصيرة التي تستخدم لتعيين جميع خصائص الرفوف الداخلية في بيانات واحدة.
padding-bottom إعداد الرفوف الداخلية السفلية للعنصر.
padding-left إعداد الرفوف الداخلية للعنصر.
padding-right ضبط الهوامش الداخلية اليمنى للعنصر.
padding-top ضبط الهوامش الداخلية العلوية للعنصر.

قراءة متعمقة

كتب خارجية:نموذج الصندوق: الهوامش الداخلية CSS