سمات الهامش في CSS | أساسيات CSS

 

خصائص الهامش في الـ CSS


تُستخدم سمات الهامش لإنشاء مسافات حول عناصر HTML. في هذا الدرس، سنتعرف على أنواع سمات الهامش وكيفية تعيينها وأنواع القيم التي تاخدها.


كما ترى في الشكل أدناه، يحتوي العنصر المعني على مساحة أكبر بمقدار 70 بكسل حوله مقارنة بالعناصر الأخرى. بمعنى آخر، تبلغ قيمة خاصية الهامش للاتجاهات المختلفة لهذا العنصر 70 بكسل.

هذا العنصر به هامش 70 بكسل.


سمات الهامش في CSS

تُستخدم سمة الهامش في CSS لإنشاء مساحة حول عناصر HTML.

تحدد سمة الهامش حجم المساحة الفارغة خارج حدود العنصر.

باستخدام لغة CSS، سيكون لديك سيطرة كاملة على سمات الهامش. يمكنك تعيين مقدار المساحة الخالية لكل جانب من جوانب العنصر باستخدام سمات الهامش المتوفرة في CSS.


الهامش margin - ضبط قيمة خاصية الهامش لكل جانب على حدة

تحتوي لغة CSS على خصائص يمكن استخدامها لتعيين قيمة الهامش لكل جانب من جوانب عنصر HTML. هذه السمات هي:

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

يمكن أن تحتوي جميع سمات الهامش على القيم التالية:

تلقائي - في هذه الحالة، يحسب المتصفح قيمة الهامش.
الحجم - في هذه الحالة، يتم تحديد قيمة سمات الهامش حسب الحجم بوحدات البكسل والسنتيمتر وما إلى ذلك. 
٪ - في هذه الحالة، يتم تحديد قيمة الهامش باستخدام نسبة مئوية من عرض العنصر المطلوب.
التوارث - يعني تعيين سمات الهامش بقيمة التوارث أن قيمة الهامش موروثة من العنصر الأصل.

ملاحظة : يمكن أيضًا استخدام القيم السالبة لتحديد سمات الهامش. 

في المثال أدناه، يتم تعيين قيمة الهامش لكل جانب من الجوانب الأربعة لعنصر الفقرة:

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

الهامش - صفة مختصرة

لاختصار الكود، يمكن تلخيص جميع سمات الهامش المدرجة أدناه في سمة واحدة:

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


واختصارها كالتالي:

p {
margin: 100px 150px 100px 80px;
}

ولكن كيف يعمل المثال أعلاه:

إذا كانت سمة الهامش تحتوي على أربع قيم:

margin: 25px 50px 75px 100px;
تبلغ قيمة الهامش العلوي 25 بكسل
الهامش الموجود على اليمين تبلغ قيمته 50 بكسل
تبلغ قيمة الهامش السفلي 75 بكسل
الهامش الأيسر له قيمة 100 بكسل

 إذا كانت سمة الهامش تحتوي على ثلاث قيم:

margin: 25px 50px 75px;
تبلغ قيمة الهامش العلوي 25 بكسل
الهوامش اليمنى واليسرى لها قيم 50 بكسل
تبلغ قيمة الهامش السفلي 75 بكسل

  إذا كانت سمة الهامش تحتوي على قيمتين:

margin: 25px 50px;
تبلغ قيمة الهوامش العلوية والسفلية 25 بكسل
تبلغ قيمة الهوامش اليمنى واليسرى 50 بكسل

   إذا كانت سمة الهامش لها قيمة:

margin: 25px;
جميع الهوامش الأربعة لها قيمة 25 بكسل

القيمة التلقائية لسمات الهامش

من أجل وضع عنصر أفقيًا في منتصف العنصر الذي يوجد به، يمكن تعيين سمة الهامش على تلقائي.

في هذه الحالة، يشغل العنصر بعض المساحة ويتم تقسيم المساحة المتبقية بالتساوي بين الهامش الأيمن والأيسر. فيما يلي مثال على تعيين سمة الهامش بقيمة تلقائية:

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

ترث قيمة سمات الهامش

في المثال التالي، يتم توريث قيمة الهامش الأيسر من العنصر الأصل:

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

p.one {
margin-left: inherit;
}

تقليل قيمة الهامش

في بعض الأحيان يتم تقليل الهوامش الدنيا والعليا للعناصر إلى هامش واحد، وهو ما يعادل أكبر هامش بين سمتَي الهامش.

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

h1 {
margin: 0 0 50px 0;
}

h2 {
margin: 20px 0 0 0;
}

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

في هذه الحالة، يبدو أن أول شيء هو أن المسافة الرأسية بين <h1> و <h2> يجب أن تكون مجموع قيمتي 50 و 20، أي قيمة 70 بكسل. ولكن وفقًا لقانون تقليل الهوامش، فإن المسافة الحقيقية بين هذين العنصرين تساوي أكبر هامش بينهم، وهو 50 بكسل.




كلمات مفتاحية: