القائمة الرئيسية

الصفحات

خاصية padding فى لغة سى اس اس CSS

خاصية CSS padding

تحدد خاصية padding في CSS الجزء الأعمق من نموذج الصندوق ، مما يخلق مساحة حول محتوى العنصر ، داخل أي هوامش و / أو حدود محددة.وللمساحة  خواص مثل الطول والنسب  المئوية الموجبة. ان القيمة الأولية أو الافتراضية التي يمكننا وضعها في الكود الذي نكتبة بدون معرفة القيم الخاصة به  لجميع خصائص المساحة المتروكة لنا في الصفخة  هي القيمة الصفرية 0.


خاصية css padding

CSS padding


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

 ملاحظة:  يخلق مساحة إضافية داخل عنصر. في المقابل ، يخلق الهامش الذي نضعه للعنصر حوله المزيد من  المساحة .

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

يجب أن تكون قيمة هذه السمة إما طولاً أو نسبة مئوية أو كلمة inherit. إذا كانت القيمة inherit، فسيكون لها نفس المساحة المتروكة لعنصرها الأصلي. ويمكن إستخدام النسبة المئوية للمربع المحتوي.


يمكن إستخدام خصائص CSS التالية للتحكم في القوائم. يمكنك أيضاً تعيين قيم padding مختلفة على كل جانب من المربع بإستخدام الخصائص التالية -

يحدد padding-bottom المسافة السفلية لعنصر ما.

يحدد padding-top المسافة العلوية للعنصر.

يحدد padding-left المسافة المتروكة اليسرى للعنصر.

تحدد padding-right  المساحة المتروكة اليمنى للعنصر.

تعمل padding كإختصار للخصائص السابقة.


The padding-bottom Property

 <p style = "padding-bottom: 15px; border:1px solid black;">
         This  text with a specified bottom padding
      </p>
      
      <p style = "padding-bottom: 5%; border:1px solid black;">
         and this text with a bottom padding in percent
      </p>

This  text with a specified bottom padding

and this text with a bottom padding in percent

The padding-top Property

<p style = "padding-top: 15px; border:1px solid black;">
         This text with a specified top padding
      </p>
      
      <p style = "padding-top: 5%; border:1px solid black;">
         and this text with a top padding in percent
      </p>

This text with a specified top padding

and this text with a top padding in percent


The padding-left Property

<p style = "padding-left: 15px; border:1px solid black;">
         This text with a specified left padding
      </p>
      
      <p style = "padding-left: 15%; border:1px solid black;">
         and this text with a left padding in percent 
      </p>

This  text with a specified left padding

and this text with a left padding in percent 

The padding-right Property

<p style = "padding-right: 15px; border:1px solid black;">
This is a text with a specified right padding </p> <p style = "padding-right: 5%; border:1px solid black;"> and this text with a right padding in percent </p>

This is a text with a specified right padding

and this text with a  right padding in percent

ميزة اضافة لون في  خاصية padding:


إضافة لون

لإضافة لون إلى padding CSS ، يمكنك استخدام خاصية background-clip وخاصية box-shadow. تتيح لك وظيفة شبك الخلفية تحديد مدى إمتداد الخلفية إلى العنصر.

{

border: 3px dashed black;

padding: 15px;

background: pink;

background-clip: border-box;

}

CSS padding

reaction:

تعليقات