58 lines
3.4 KiB
Markdown
58 lines
3.4 KiB
Markdown
---
|
|
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 الجزء الخارجي من نموذج الصندوق ، مما يؤدي إلى إنشاء مساحة حول محتوى عنصر ما ، خارج أية أعمدة و / أو حدود محددة.
|
|
|
|
|
|
|
|
## انهيار الهوامش
|
|
|
|
سوف تنهار هوامش عمودي على عناصر مختلفة تلامس بعضها البعض (وبالتالي لا تحتوي على محتوى أو حشوة أو حدود تفصل بينها) ، مما يشكل هامشًا واحدًا يساوي أكبر الهوامش المجاورة. هذا لا يحدث في هوامش أفقية (يسار ويمين) ، فقط عمودي (أعلى وأسفل).
|
|
|
|
## دعم المتصفح
|
|
|
|
مدعوم بشكل فعال في جميع المتصفحات (منذ 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/) |