خصائص Style padding

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

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

يمكن لهذا الخصائص أخذ واحد إلى أربعة قيم:

خصائص margin و خصائص الهوامش الداخلية تضيف مساحة حول العنصر. ولكن، الفرق يكمن في أن margin تضيف مساحة حول الحواف، بينما padding تضيف مساحة داخل حواف العنصر.

  • قيمة واحدة، مثلًا: div {padding: 50px} - جميع الأربعة جوانب ستكون لها مسافات داخلية قدرها 50px
  • قيمتان، مثلًا: div {padding: 50px 10px} - المسافات الداخلية العلوية والسفلية ستكون 50px، والمسافات الداخلية الجانبية ستكون 10px
  • ثلاثة قيم، مثل: div {padding: 50px 10px 20px} - الهوامس الداخلية العلوية 50px، الهوامس الداخلية اليسرى واليمنى 10px، الهوامس الداخلية السفلية 20px
  • أربعة قيم، مثل: div {padding: 50px 10px 20px 30px} - الهوامش الداخلية العلوية 50px، الهوامش الداخلية اليمنى 10px، الهوامش الداخلية السفلية 20px، الهوامش الداخلية اليسرى 30px

يرجى الرجوع أيضًا إلى:

دليل CSS:CSS حشوة الداخل

دليل CSS:خصائص الهوامش الداخلية

مثال

مثال 1

ضبط الهوامش الداخلية للعنصر <div>:

document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";

جرب بنفسك

مثال 2

تغيير الهوامش الداخلية للعنصر <div> إلى "25px":

document.getElementById("myDiv").style.padding = "25px";

جرب بنفسك

مثال 3

إرجاع الهوامش الداخلية للعنصر <div>:

alert(document.getElementById("myDiv").style.padding);

جرب بنفسك

مثال 4

الفرق بين خصائص الهوامش الداخلية والهوامش الخارجية:

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

جرب بنفسك

النحو

إرجاع خصائص الهوامش الداخلية:

الجسم.style.padding

ضبط خصائص الهوامش الداخلية:

الجسم.style.padding = "%|الطول|الافتراضي|التوريث"

قيمة الخصائص

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

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

القيمة الافتراضية: 0
القيمة المعدلة: سلسلة من الأحرف، تعبر عن الهوامش الداخلية للعنصر.
إصدار CSS: CSS1

دعم المتصفح

الخروم Edge Firefox Safari Opera
الخروم Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم