3.4 KiB
| title | localeTitle |
|---|---|
| Margins | هوامش |
هوامش
على 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+ وغيرها)