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

الهامش الداخلي في لغة CSS

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

بدون هامش داخلي
هامش داخلي قام بأبعاد النص عن الحدود بقيمة الهامش

هامش من الأعلي Padding top

يمكننا التحكم في اي اتجاة للهامش وذلك علي ما يتطلبة التصميم الخاص بك ,قد يطلب التصميم الخاص بك ان يكون هناك هامش للعنصر من الأعلي أو الأسفل أو اليمين او الشمال ,والأوامر المسؤولة عن ذلك توفرها لنا لغة CSS ,ولتوضيح فكرة الهامش العلوي قم بالنظر الي العنصر التالي ,ستلاحظ وجود  مساحة فارغة بين الكلام وحدود العنصر من الأعلي فقد , وذلك يسمي بالهامش الداخلي من الأعلي Padding Top

;	padding-top: 20px
وذلك يسمي بالهامش الداخلي من الأعلي Padding Top

هامش من اليمين Padding Right

يمكننا ايضاً انشاء هامش من اي جانب من اليمين او الشمال ,ولتوضيح فكرة الهامش من اليمين او الشمال ,انظر للفقرة التالية ,ستلاحظ وجود هوامش من الجانب الأيمن فقد للفقرة

ستلاحظ وجود هوامش من الجانب الأيمن فقد للفقرة

 ملحوظة : يمكنك تطبيق الهوامش علي اكثر من جانب او جانب واحد فقد عن طريق استخدام الأمر الخاص بكل جانب


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

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

padding : 20px 15px 10px 5px 
  • القيمة الأولي من اـجاة اليمين 20px = الهامش الأعلي
  • القيمة الثانية من اتجاه اليمين 15px = الهامش الأيمن
  • القيمة الثالثة من اتجاه اليمين 10px = الهامش السفلي
  • القيمة الرابعة من اتجاه اليمين 5px = الهامش الشمالي

 

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