الكورس

Advertisements

الخاصية Margin فى CSS


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


 

الخاصية Margin

 

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

 

مثال للتوضيح

فى المثال التالى الـ margin هو خلفية اللون الأخضر:

Margin Example

<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 Example

 

يمكن أن تحتوي جميع خصائص 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%;
}

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


 

الجوانب الفردية للـ 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; 
}


الإبلاغ عن خطأ

×

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

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements