خاصية هامش CSS

الهامش عبارة عن خاصية CSS بسيطة تحتوي على صيغة مختصرة ما زلت أنساها ، لذلك كتبت هذا المنشور المرجعي

الmarginتُستخدم خاصية CSS بشكل شائع في CSS لإضافة مساحة حول عنصر.

يتذكر:

  • marginتضيف مساحة خارج حدود العنصر
  • paddingيضيف مساحة داخل حد عنصر

خصائص الهامش المحددة

marginله 4 خصائص ذات صلة تعمل على تغيير هامش حافة واحدة في وقت واحد:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

استخدام هؤلاء بسيط للغاية ولا يمكن الخلط معه ، على سبيل المثال:

margin-left: 30px;
margin-right: 3em;

باستخدامmarginالاختزال

marginهو اختصار لتحديد هوامش متعددة في نفس الوقت ، واعتمادًا على عدد القيم التي تم إدخالها ، فإنه يتصرف بشكل مختلف.

1 قيمة

استخدام قيمة واحدة ينطبق ذلك علىالكلالهوامش: أعلى ، يمين ، أسفل ، يسار.

margin: 20px;

2 القيم

استخدام قيمتين يطبق الأول علىقمة القاع، والثاني ليسار يمين.

margin: 20px 10px;

3 قيم

باستخدام 3 قيم يتم تطبيق الأول علىأعلى، والثاني ليسار يمينوالثالث لقاع.

margin: 20px 10px 30px;

4 قيم

باستخدام 4 قيم يتم تطبيق الأول علىأعلى، والثاني لحقوالثالث لقاع، الرابع لاليسار.

margin: 20px 10px 5px 0px;

لذلك ، الترتيبأعلى اليمين ، أسفل اليسار.

تم قبول القيم

marginيقبل القيم المعبر عنها بأي نوع من وحدات الطول ، وأكثرها شيوعًا هي px ، em ، rem ، لكنيوجد العديد من الآخرين.

كما أنه يقبل القيم المئوية والقيمة الخاصةauto.

استخدامautoلتوسيط العناصر

autoيمكن استخدامه لإخبار المتصفح بتحديد الهامش تلقائيًا ، وهو الأكثر شيوعًا لتوسيط عنصر بهذه الطريقة:

margin: 0 auto;

As said above, using 2 values applies the first to bottom & top, and the second to left & right.

The modern way to center elements is to use Flexbox, and its justify-content: center; directive.

Older browsers of course do not implement Flexbox, and if you need to support them margin: 0 auto; is still a good choice.

Using a negative margin

margin is the only property related to sizing that can have a negative value. It’s extremely useful, too. Setting a negative top margin makes an element move over elements before it, and given enough negative value it will move out of the page.

A negative bottom margin moves up the elements after it.

A negative right margin makes the content of the element expand beyond its allowed content size.

A negative left margin moves the element left over the elements that precede it, and given enough negative value it will move out of the page.

Download my free CSS Handbook


More css tutorials: