خاصية Style marginTop

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

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

خاصية margin و خاصية padding تم إدراج مساحة حول العنصر. ولكن هناك فرق، حيث يتم إدراج margin حول الحواف، بينما يتم إدراج padding داخل حواف العنصر.

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

دليل CSS التعليماتال边际 الخارجي CSS

دليل CSSخاصية margin-top

دليل HTML DOMخاصية margin

مثال

مثال 1

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

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

تجربة شخصية

مثال 2

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

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

تجربة شخصية

مثال 3

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

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

تجربة شخصية

مثال 4

الفرق بين marginTop و paddingTop:

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

تجربة شخصية

النحو

استرداد خاصية marginTop:

object.style.marginTop

تعيين خاصية marginTop:

object.style.marginTop = "%|length|auto|initial|inherit"

قيمة الخاصية

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

تفاصيل تقنية

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

الدعم عن طريق

شرح Edge Firefox Safari Opera
شرح Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم