---
title: Margins
localeTitle: هوامش
---
# هوامش

على `margin` خاصية CSS يحدد منطقة الهامش على جميع الجوانب الأربعة من عنصر. يمكن استخدام هذه الخاصية لإنشاء مساحة حول المحتوى (خارج الحدود). وهو اختصار لتعيين كل الهوامش الفردية دفعة واحدة: `margin-top` ، `margin-right` ، `margin-bottom` ، `margin-left` . يتم تعريف القيم في اتجاه عقارب الساعة.

يتم تعيين قيم الهامش باستخدام أطوال أو نسب مئوية أو كلمة رئيسية `auto` أو `inherit` ، ويمكن أن تقبل قيمًا صفرية أو سالبة. القيمة الأولية ، أو الافتراضية ، لجميع خصائص الهامش هي 0. بينما يمكنك استخدام `inherit` الكلمة الأساسية ولكن لا يمكن استخدامها مع قيمة الطول.

## بناء الجملة

 `.element { 
    margin: margin-top || margin-right || margin-bottom || margin-left; 
 } 
` 

يمكن تحديد هذه الخاصية باستخدام قيم واحدة أو اثنتين أو ثلاثة أو أربعة.

*   عند تحديد قيمة واحدة ، فإنها تطبق نفس الهامش على الجوانب الأربعة.
*   عند تحديد قيمتين ، ينطبق الهامش الأول على الأعلى والأسفل ، والثاني على اليسار واليمين.
*   عند تحديد ثلاث قيم ، ينطبق الهامش الأول على الأعلى ، والثاني على اليسار واليمين ، والثالث إلى الأسفل.
*   عند تحديد أربع قيم ، يتم تطبيق الهوامش على الأعلى ، اليمين ، الأسفل ، واليسار في ذلك الترتيب (في اتجاه عقارب الساعة).

 `/* Apply to all four sides */ 
 margin: 1em; 
 
 /* top and bottom | left and right */ 
 margin: 5% 10%; 
 
 /* top | left and right | bottom */ 
 margin: 1em 2em 2em; 
 
 /* top | right | bottom | left */ 
 margin: 5px 1em 0 1em; 
` 

## أين في نموذج مربع

تحدد خاصية الهامش في CSS الجزء الخارجي من نموذج الصندوق ، مما يؤدي إلى إنشاء مساحة حول محتوى عنصر ما ، خارج أية أعمدة و / أو حدود محددة.

![نموذج صندوق المغلق](https://www.w3.org/TR/css3-box/box.png)

## انهيار الهوامش

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

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

مدعوم بشكل فعال في جميع المتصفحات (منذ IE6 + وفايرفوكس 2+ و Chrome 1+ وغيرها)

### معلومات اكثر

*   [W3C مسودة العمل](https://www.w3.org/TR/css3-box/#the-margin)
*   [W3C CSS Level 2](https://www.w3.org/TR/CSS2/box.html#propdef-margin)
*   [W3C CSS Level 1](https://www.w3.org/TR/CSS1/#margin)
*   [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)
*   [CSS الخدع](https://css-tricks.com/almanac/properties/m/margin/)