خصائص margin CSS

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

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

الشرح

هذه الخاصية القصيرة تضبط عرض جميع هوامش العنصر، أو عرض هوامش كل جانب.

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

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

مثال 1

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

مثال 2

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

مثال 3

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

مثال 4

margin:10px;
  • جميع الهوامش الأربعة هي 10px

انظر أيضًا:

دليل CSSحاشية CSS

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

مثال

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

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

تجربة بنفسك

نص CSS

margin: length|auto|initial|inherit;

قيمة الخاصية

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

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

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

مزيد من الأمثلة

جميع خصائص الهوامش في بيان واحد
هذا المثال يوضح كيفية تعيين جميع خصائص الهوامش في بيان واحد.

دعم المتصفح

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

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