شرح خاصية Padding | أساسيات CSS


معنى Padding


تُستخدم سمات الحشو لإنشاء مساحة فارغة حول محتوى العنصر. في هذا الدرس، سنتعرف على أنواع سمات الحشو وكيفية تعيينها وأنواع القيم التي تاخدها.


قيمة سمة المساحة المتروكة للعنصر أدناه هي 70 بكسل: 

هذا العنصر له قيمة 70 بكسل لسمة padding.


سمة المساحة المتروكة في CSS

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

المساحة التي تم إنشاؤها بواسطة سمة padding هي بين محتوى عنصر وحدود ذلك العنصر.

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


المساحة المتروكة - يضبط مقدار خاصية الحشو لكل جانب على حدة

تحتوي لغة CSS على سمات يمكن استخدامها لتعيين قيمة المساحة المتروكة لكل جانب من جوانب عنصر HTML. هذه السمات هي:

  ● padding-top
  ● padding-right
  ● padding-bottom
  ● padding-left


يمكن أن تحتوي جميع سمات المساحة المتروكة على القيم التالية: 

        ● الحجم - في هذه الحالة، يتم تحديد مقدار سمات الحشو حسب الحجم بوحدات البكسل والسنتيمتر وما إلى ذلك. 
        ● ٪ - في هذه الحالة، يتم تحديد مقدار المساحة المتروكة باستخدام نسبة مئوية من عرض العنصر المطلوب.
        ● موروتة - يعني تعيين سمات الحشو إلى القيمة الموروثة أن قيمة المساحة المتروكة موروثة من العنصر الأصل.

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


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

الحشو - صفة مختصرة

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

         ● padding-top
         ● padding-right
         ● padding-bottom
         ● padding-left

    p {
    padding: 50px 30px 50px 80px;
    }

    ولكن كيف يعمل المثال أعلاه:

    إذا كانت سمة المساحة المتروكة تحتوي على أربع قيم:

    padding: 25px 50px 75px 100px;
    ● قيمة الحشوة العلوية 25 بكسل
    ● تبلغ قيمة المساحة المتروكة اليمنى 50 بكسل
    ● الحشوة السفلية لها قيمة 75 بكسل
    ● قيمة المساحة المتروكة اليسرى 100 بكسل


    إذا كانت سمة المساحة المتروكة تحتوي على ثلاث قيم: 

    padding: 25px 50px 75px;
    ● قيمة الحشوة العلوية 25 بكسل
    ● الحشوة اليمنى واليسرى لها قيم 50 بكسل
    ● الحشوة السفلية لها قيمة 75 بكسل

     

    إذا كانت سمة المساحة المتروكة تحتوي على قيمتين: 

    padding: 25px 50px;

    ● قيمة المساحة المتروكة العلوية والسفلية 25 بكسل
    ● الوسادات الموجودة على اليمين واليسار لها قيمة 50 بكسل

    إذا كانت سمة المساحة المتروكة تحتوي على قيمة:

    padding: 25px;
                  ● جميع الحشوات الأربعة لها قيمة 25 بكسل

    يوضح المثال التالي كيفية استخدام جميع الطرق الأربعة:

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

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

    div.ex3 {
    padding: 25px 50px;
    }

    div.ex4 {
    padding: 25px;
    }



    كلمات مفتاحية: