الخاصية Margin فى CSS

فى هذا الفصل “CSS Margin” سيتم شرح الخاصية Padding فى CSS، بالتفصيل مع بعض الأمثلة التوضيحية.

الخاصية Margin

تقوم خاصية margin (الهامش) فى CSS بتعيين منطقة الـ margin على الجوانب الأربعة للعنصر.

<style>
    .example {
        background-color: green;
        border: 11px solid blue;
    }

    .example h2 {
        border: solid 1px;
        color: white;
        margin: 30px;
        background-color: black;
    }
</style>
<div class="example">
    <h2>JavaScript Example</h2> 
</div>

يمكن أن تحتوي جميع خصائص margin على القيم التالية:

• Length: يحدد حجم مساحة الهوامش كقيمة ثابتة (px ، pt ، cm، …إلخ).
• %: يحدد margin بنسب مئوية % لعرض محتوي العنصر.
• inherit: يحدد أنه يجب أن يكون الـ margin موروثًا من العنصر الأصلي.
• auto: يقوم المستعرض بحساب margin تلقائي.
• (-): يُسمح بالقيم السلبية.

مثال للتوضيح:

div { 
  margin: -30px;
}
            
div { 
  margin: auto;
}
            
div { 
  margin: 30pt; /* 30pt or 30px or 3cm ....etc */
}
            
div { 
  margin: inherit;
}
            
div { 
  margin: 30%;
}

الجوانب الفردية للـ Margin 

تحتوي CSS على خصائص لتحديد margin لكل جانب من العنصر:

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

مثال للتوضيح:

div { 
  margin-top: 30px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 5px;
}

خاصية Margin المختصرة

لتقصير الكود، من الممكن تحديد جميع خصائص margin في خاصية واحدة. خاصية الـ margin هي خاصية اختزال لخصائص الـ margin الفردية التالية:

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

عندما يتم تحديد قيمة واحدة، فإنها تطبق نفس الـ margin على الجوانب الأربعة، كالتالى:

/* Here margin-top = margin-right = margin-bottom = margin-left = 30px */
div { 
  margin: 30px; 
}

عندما يتم تحديد قيمتين، يتم تطبيق الـ margin، الأول على الأعلى والأسفل، والثاني على اليسار واليمين، كالتالى:

/* 
    ** margin-top   = margin-bottom = 30px
    ** margin-right = margin-left   = 20px 
*/

div {
  margin: 30px 20px; 
}

إذا تم تحديد ثلاث قيم، ينطبق الـ margin الأول على الأعلى، والثاني على اليمين واليسار، والثالث على الأسفل، كالتالى:

/* 
    ** margin-top    = 30px
    ** margin-right  = margin-left = 20px
    ** margin-bottom = 10px 
*/
div { 
  margin: 30px 20px 10px; 
}

عند تحديد أربع قيم، يتم تطبيق margin على الأعلى، واليمين، والأسفل، واليسار بهذا الترتيب (باتجاه عقارب الساعة)، كالتالى:

/* 
    ** margin-top    = 30px
    ** margin-right  = 20px
    ** margin-left   = 10px
    ** margin-bottom = 5px 
*/
div { 
  margin: 30px 20px 10px 5px; 
}

Margin Collapse

أحيانًا يتم طي الهوامش العلوية والسفلية للعناصر في هامش واحد يساوي أكبر الهوامش.

هذا لا يحدث على الهامش الأيسر والأيمن! بل الهوامش العلوية والسفلية فقط.

مثال للتوضيح:

div { 
  margin: 30px 0 0 0; 
}