الخاصية Padding فى CSS | الجوانب الفردية للخاصية

فى هذا الفصل سيتم شرح الخاصية Padding فى CSS، بالتفصيل مع بعض الأمثلة التوضيحية.

الخاصية Padding

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

<style>
    .example {
        background-color: black;
        border: 10px solid green;
        padding: 30px;
    }

    .example h2 {
        border: solid 1px;
        color: white;
    }
</style>
<div class="example">
    <h2>Padding Example</h2> 
</div>

الجوانب الفردية للـ padding

يحتوي CSS على خصائص لتحديد padding لكل جانب من عنصر:

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

مثال للتوضيح:

<style>
    .example {
        background-color: black;
        border: 10px solid green;
        padding-top: 15px;
        padding-right: 10px;
        padding-bottom: 15px;
        padding-left: 10px;
    }

    .example h2 {
        border: solid 1px;
    }
</style>
<div class="example22">
    <h2>Individual aspects of padding</h2> 
</div>

يمكن أن تحتوي جميع خصائص الـ padding على القيم التالية:

1. Length: يحدد حجم المساحة المتروكة كقيمة ثابتة (px ، pt ، cm، …إلخ).
2. %: يحدد padding بنسب مئوية % لعرض محتوي العنصر.
3. inherit: يحدد أنه يجب أن يكون الـ padding موروثًا من العنصر الأصلي.

💡 القيم السلبية غير صالحة.

خاصية الـ padding المختصرة

لتقصير الكود، من الممكن تحديد جميع خصائص padding في خاصية واحدة + خاصية padding هي خاصية اختزال لخصائص الـ padding الفردية التالية:

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

مثال للتوضيح:

/* HERE padding-top = padding-right = padding-bottom = padding-left = 25% */
div { 
 padding: 25%; 
}

عندما يتم تحديد قيمتين، يتم تطبيق الـ padding: الأول على الأعلى والأسفل، والثاني على اليسار واليمين، كالتالى:

/* 
   ** paading-top   = paading-bottom  = 1em
   ** paading-right = paading-left    = 2em
*/

div { 
 padding: 1em 2em; 
}

عند تحديد ثلاث قيم، يتم تطبيق الـ padding: الأول على الأعلى، والثاني على اليمين واليسار، والثالث على الأسفل، كالتالى:

/* 
   ** padding-top    = 30cm
   ** padding-right  = padding-left = 20cm
   ** padding-bottom = 10cm 
*/

div { 
 padding: 30cm 20cm 10cm; 
}

إذا تم تحديد أربع قيم، يتم تطبيق الـ padding على الأعلى، واليمين، والأسفل، واليسار بهذا الترتيب (باتجاه عقارب الساعة)، كالتالى:

/* 
   ** padding-top    = 30px
   ** padding-right  = 20px
   ** padding-left   = 10px
   ** padding-bottom = 5px 
*/

div { 
 padding: 30px 20px 10px 5px; 
}