خصائص padding CSS

التعريف والاستخدام

تُستخدم خاصية padding المختصرة لضبط جميع خصائص الهوامش في بيان واحد.

شرح

تُستخدم هذه الخاصية المختصرة لضبط عرض جميع الهوامش للعنصر، أو ضبط عرض الهوامش على كل جانب. لا تؤثر الهوامش المضبوطة على العناصر الداخلية غير المعادلة على حساب الارتفاع، لذا قد تتمدد العناصر من الناحية البصرية إلى الصف التالي، وقد تلامس محتوى آخر. سيتدفق الخلفية عبر الهوامش. لا يُسمح بتحديد قيم هوامش سلبية.

ملاحظة:لا يُسمح باستخدام القيم السلبية.

مثال 1

padding:10px 5px 15px 20px;
  • الهوامش العليا هي 10px
  • الهوامش اليمنى هي 5px
  • الهوامش السفلية هي 15px
  • الهوامش اليسرى هي 20px

مثال 2

padding:10px 5px 15px;
  • الهوامش العليا هي 10px
  • الهوامش اليمنى واليسرى هي 5px
  • الهوامش السفلية هي 15px

مثال 3

padding:10px 5px;
  • الهوامش العليا والسفلية هي 10px
  • الهوامش اليمنى واليسرى هي 5px

مثال 4

padding:10px;
  • جميع 4 هوامش هي 10px

انظر أيضًا:

دليل CSS:الإضافات الداخلية CSS

دليل HTML DOM:خاصية padding

مثال

ضبط 4 هوامش عنصر p:

p
  {
  padding:2cm 4cm 3cm 4cm;
  }

تجربة بنفسك

نحو CSS

padding: length|initial|inherit;

قيمة الخاصية

القيمة الوصف
auto حساب المتصفح للهوامش.
length يحدد قيمة الهوامش باستخدام وحدة محددة، مثل البكسل أو السنتيمتر وما إلى ذلك. القيمة الافتراضية هي 0px.
% يحدد الهوامش بناءً على نسبة العرض الخاص بالعنصر الأم.
inherit يحدد يجب أن يتم ترقيه الهوامش من العنصر الأم.

تفاصيل التقنية

القيمة الافتراضية: 0
التنسيق: لا
الإصدار: CSS1
جافا سكربت نحو: object.style.padding="10px 5px"

TIY مثال

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

دعم المتصفح

الرقم في الجدول يوضح إصدار المتصفح الأول الذي يدعم هذه الخاصية بالكامل.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5