فاصلة
  • CSS
  • ?
    : ترتيب الدرس
  • 13
    عدد الدروس
  • ?
    أخر تحديث

الهوامش في لغة CSS

تعريف الهامش : هو مساحة فارغة حول العنصر

نستخدم الهوامش في لغة CSS للتحكم في حجم المساحة الفارغة حول عناصر HTML , تخيل معي بأن هناك مربع في اقصي يمين الصفحة ونريد ان نقوم بتحريكة مسافة الي جهة الشمال بحيث تكون هناك مساحة فارغة بـأتجاة اليمين , وللتوضيح أكثر قم بالنظر في الأشكال التالية ,الشكل الأول لا يحتوي علي هامش من اليمين والشكل التاني يحتوي علي هامش قليل من اليمين ,والثالث يحتوي علي هامش أكبر من الثاني ,ومن هنا نستنتج بأن الهامش هو المساحة الفارغة حول العنصر من أتجاة معين , وفي حالة الأشكال التالية فأن الهامش (المساحة الفارغة) موجودة في اتجاة اليمين

 
 
 

اتجاه الهامش 

في الهوامش يمكننا تحديد الأتجاه المطلوب لتنفيذ الهامش ,ومع ذلك يمكننا انشاء هامش من الأعلي واليمين والشمال والأسفل ,وكل ذلك يمكننا تنفيذة علي حدي او تنفيذ بعض الأتجاهات او جزء من الأتجاهات علي العنصر , مثلاً يمكن انشاء هامش من اليمين والاعلي , او هامش من اليمين فقد او هامش من كل الاتجاهات ,وتلك المميزات توفرها لنا لغة CSS للوصول الي الشكل المطلوب للعنصر .


هامش من الأعلي Margin-top

عند تحديد هامش للعنصر من الاعلي سوف يتم ترك مساحة فارغة في أعلي العنصر تساوي المساحة التي قمت بتحديدها ,وما سنعرضة الأن هو مستطيلين وسوف نقوم بأضافة هامش الي المستطيل الذي في الأسفل لترك مساحة فارغة بينة وبين المستطيل الموجود في الأعلي .

;	margin-top: 30px
 
 

 


هامش من اليمين Margin-right

نستخدم الهوامش من اليمين لنفس سبب استخدام الهوامش من اي أتجاه أخر ,لأنشاء مساحة فارغة يمين العنصر ,وسوف نطبق الامر علي المستطيلات التالية ,بحيث سوف نقوم بأضافة هامش يمين المستطيل الثاني للأبتعاد او ترك مساحة فارغة بينة وبين المستطيل الاول تساوي القيمة التي قمنا بأعطائها للهامش وهي 30px مساحة فارغة تم اعطائها يمين المستطيل الثاني لترك مساحة فارغة بينهة وبين المستطيل الأول

;	margin-right: 30px
 
 

هامش من كل الأتجاهات margin 

لأنشاء هامش من كل الأتجاهات الخاصة بالعنصر , سوف نستخدم الخاصية margin بدون اضافة اي اتجاه الي الامر ,وفي تلك الحالة سوف يقوم تلقائياً بأعطاء هامش من الزوايا الأربعة للعنصر , وفيما يلي 4 مستطيلات تحتوي علي هوامش تلقائية من الأربع جوانب نتيجة أستخدام الأمر margin

 
 
 
 

الكود المختصر 

يمكنك عن طريق الكود المختصر تحديد قيمة هامش لكل اتجاه في سطر واحد ,ولكن تذكر جيداً الترتيب الخاص بالقيم وهي ("اعلي","يمين","اسفل","شمال"), وهو ترتيب قم بحفظة جيداً لانك ستستخدمة في اختصارات لأوامر كثيره في الدروس القادمة

;	margin: 30px 20px 10px 5px
  • القيمة الأولي = هامش من الاعلي
  • القيمة الثانية = هامش من اليمين
  • القيمة الثالة = هامش من الأسفل
  • القيمة الرابعة = هامش من الشمال

 

أساسيات التضمين الألوان الخلفيات الحدود الهوامش الهوامش الداخلية العرض والأرتفاع الصناديق حدود خارجية النصوص الخطوط الأيقونات