9-الهوامش (Margins) في CSS

الوظيفة: تستخدم الهوامش لإنشاء مساحات فارغة حول العناصر، خارج أي حدود محددة.

هوامش CSS (Margins):

• خصائص الهامش في CSS تستخدم لإنشاء مسافات حول العناصر، خارج الحدود المحددة.
• تتيح CSS تحكمًا كاملاً في الهوامش. توجد خصائص لتعيين هامش كل جانب من العنصر (علوي، يمين، أسفل، يسار).

هوامش – جوانب محددة:

• يوفر CSS خصائص لتحديد هامش كل جانب من العنصر:
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

قيم خصائص الهوامش:

• تقبل جميع خصائص الهوامش القيم التالية:
  • auto: يُحسب المتصفح الهامش تلقائيًا.
  • طول: يحدد الهامش بوحدات مثل بيكسل ونقطة وسنتيمتر وما إلى ذلك.
  • %: يحدد الهامش كنسبة مئوية من عرض العنصر الحاوي.
  • inherit: يحدد أن يتم توريث الهامش من العنصر الأب.

ملاحظة:

• القيم السلبية مسموحة.

مثال:

تعيين هوامش مختلفة لجميع جوانب عنصر <p>:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

هوامش CSS (Margins) – اختصار الخاصية

لتقصير الكود، يُمكنك تحديد جميع خصائص الهوامش في خاصية واحدة.

خاصية margin هي اختصار للخصائص الفردية التالية:

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

كيف تعمل:

• أربع قيم:

p {
  margin: 25px 50px 75px 100px;
}

• هامش العلوي: 25px
• هامش اليمين: 50px
• هامش السفلي: 75px
• هامش اليسار: 100px
• ثلاث قيم:

p {
  margin: 25px 50px 75px;
}

• هامش العلوي: 25px
• هامش اليمين واليسار: 50px
• هامش السفلي: 75px
• قيمتان:

p {
  margin: 25px 50px;
}

• هامش العلوي والسفلي: 25px
• هامش اليمين واليسار: 50px
• قيمة واحدة:

p {
  margin: 25px;
}

• جميع الهوامش: 25px

القيمة auto:

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

مثال:

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

القيمة inherit:

يسمح هذا المثال بتوريث هامش اليسار للعنصر ذي الفئة ex1 من العنصر الأب (div):

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

جميع خصائص هوامش CSS:

اندماج الهوامش في CSS (Margin Collapse)

في بعض الأحيان، تندمج هامشان في هامش واحد.

اندماج الهوامش:

• يمكن أن تنهار الهوامش العلوية والسفلية للعناصر أحيانًا إلى هامش واحد يساوي أكبر هامشين.
• لا يحدث هذا مع الهوامش اليسرى واليمنى، فقط العلوية والسفلية!

مثال:

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

في المثال أعلاه، يحتوي عنصر <h1> على هامش سفلي يبلغ 50 بكسل، ويحتوي عنصر <h2> على هامش علوي مضبوط على 20 بكسل.

من المنطق الشائع أن نفترض أن الهامش الرأسي بين <h1> و <h2> سيكون إجمالي 70 بكسل (50 بكسل + 20 بكسل). ولكن بسبب انهيار الهوامش، يصبح الهامش الفعلي 50 بكسل.