سمة الهوامش في النمط

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

margin يحدد السمة أو يعيد السمة العائدة للعنصر الخارجي.

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

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

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

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

دليل تعليمات CSS:ال边际 CSS

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

مثال

مثال 1

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

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

تجربة شخصية

مثال 2

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

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

تجربة شخصية

مثال 3

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

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

تجربة شخصية

مثال 4

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

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

تجربة شخصية

النحو

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

object.style.margin

إعداد خصائص الهوامش:

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

قيمة الخصائص

القيمة الوصف
% تعريف الهوامش باستخدام نسبة من عرض العنصر الأم.
length تعريف الهوامش باستخدام وحدة الطول.
auto browser sets the margin (all four margins will be equal).
initial إعداد هذا الخصائص إلى قيمته الافتراضية. يرجى الرجوع إلى initial.
inherit يرث هذا الخصائص من العنصر الأم. يرجى الرجوع إلى inherit.

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

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

دعم المتصفحات

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم