خصائص Style paddingTop

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

paddingTop تعيين أو استرداد الهوامش العلوية للعنصر.

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

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

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

دليل تعليمات CSSCSS padding

دليل CSSخصائص padding-top

دليل HTML DOMخصائص الهوامش

مثال

مثال 1

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

document.getElementById("myDiv").style.paddingTop = "50px";

جرب بنفسك

مثال 2

استعادة الهوامش العلوية للعنصر <div> إلى "normal":

document.getElementById("myDiv").style.paddingTop = "0px";

جرب بنفسك

مثال 3

استرداد الهوامش العلوية للعنصر <div>:

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

جرب بنفسك

مثال 4

فرق بين marginTop و paddingTop:

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

جرب بنفسك

النحو

استرداد الخاصية paddingTop:

object.style.paddingTop

إعداد الخاصية paddingTop:

object.style.paddingTop = "%|length|initial|inherit"

قيمة الخصائص

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

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

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

دعم المتصفح

كروم إدج فايرفوكس Safari Opera
كروم إدج فايرفوكس Safari Opera
الدعم الدعم الدعم الدعم الدعم