الكورس

Advertisements

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


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


 

الخاصية Padding

 

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

 

مثال للتوضيح

فى المثال التالى الـ padding هو خلفية اللون الأسود:

Padding Example

<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 Example

مساحة الـ padding لعنصر ما هي المسافة بين محتواه وحدوده.


 

الجوانب الفردية للـ 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>

Individual aspects of padding

 

يمكن أن تحتوي جميع خصائص الـ 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 على الجوانب الأربعة.

 

عندما يتم تحديد قيمتين، يتم تطبيق الـ 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; 
}


الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements