تعلم الهوامش في css

 الهوامش في CSS

تُستخدم الهوامش لإنشاء مساحة حول العناصر أو حدود حول العناصر التي تضعها على صفحة الويب. 

الهامش هو خاصية CSS تحدد المساحة الفارغة حول عنصر HTML. تضمن الهوامش بقاء المنطقة المحددة حول العنصر غير مشغولة بأي عنصر مجاور. 

على سبيل المثال في الشكل التالي لاحظ أن للعنصر هامش 20 بكسل على الجوانب الأربعة.

توفر لك لغة  CSS إمكانية التحكم بالهوامش وتعيين الهامش لكل جانب من العنصر بشكل مستقل.

• الهامش العلوي  margin-top
• الهامش الأيمن    margin-right
• الهامش السفلي margin-bottom
• الهامش الأيسر   margin-left

;margin-top: 40px

;margin-right: 20px

;margin-bottom:40px

;margin-left:20px

يمكن أن تحتوي قيمة خصائص الهامش أحد القيم التالية:

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

length  يتم تحديد قيمة الهامش بالبكسل، أوالنقطة، أوالسنتيمتر وما إلى ذلك.

نسبة مئوية ٪  تحدد هامش للعتصر من خلال نسبة  مئوية من عرض العنصر الحاوي للعنصر الحالي

كلمة مفتاحية مثل  inherit, initial, revert, unset 

inherit  تحدد أن الهامش يجب أن يتم توريثه من العنصر الأصل مثلاً إذا كان لدينا عنصر <p > موجود ضمن عنصر <div> سيكون له نفس هوامشه

ملاحظة: يمكن تحديد قيم سالبة للهوامش. 

;margin-left: -10px

مثال: 

}boxBlue

    ;margin-top: 20px

    ;margin-right: 40px

    ;margin-bottom:40px

    ;margin-left:20px

{

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

.boxBlue{margin:25px 50px50px 25px}

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

1. القيمة الأولى تمثل الهامش العلوي
2. القيمة الثانية تمثل الهامش الأيمن 
3. القيمة الثالثة تمثل الهامش السفلي 
4.  القيمة الرابعة تمثل الهامش الأيسر 

وإذا كانت خاصية الهامش تحتوي على ثلاث قيم فهذا يعني أن :

.boxBlue{margin:25px 50px 25px }

1.  القيمة الأولى هي الهامش العلوي 
2.  والقيمة الثانية هي الهامش الأفقي (يميني ويساري) 
3. القيمة الثالثة هي الهامش السفلي.

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

.boxBlue{margin:25px 50px}

• القيمة الأولى هي الهامش العمودي (أعلى وأسفل)
• القيمة الثانية هي الهامش الأفقي (يميني ويساري).

إذا كانت خاصية الهامش لها قيمة واحدة:

.boxBlue{margin:25px}

فهذه القيمة تعني قيمة الهامش على الجوانب الأربعة للعنصر.