1. إستبعاد الملاحظة

درس دورة تعلم لغة CSS | Margin & Padding (13)

الموضوع في 'منتدى الدورات العامة' بواسطة Ibrahem Smart, بتاريخ ‏أغسطس 17, 2018.

  1. Ibrahem Smart

    Ibrahem Smart زيزوومى محترف

    إنضم إلينا في:
    ‏يناير 30, 2017
    المشاركات:
    1,828
    الإعجابات :
    996
    نقاط الجائزة:
    730
    الجنس:
    ذكر
    الإقامة:
    الاسكندرية
    برامج الحماية:
    ESET
    نظام التشغيل:
    Windows 7


    [​IMG]

    مرحبا إخوتي أعضاء منتديات زيزووم للأمن والحماية
    اليوم سأشرح لكم في دورة تعلم لغة
    CSS

    Margin & Padding
    الهوامش الداخلية والخارجية

    ------------------------------------------------------------

    الهوامش الداخلية هي خاصية padding وتستخدم لعمل توسيع للعنصر من الداخل بعدد بيكسلات من كل جانب أنت تحدده.
    الهوامش الخارجية هي خاصية margin وهي عبارة عن ابعاد العنصر عن باقي العناصر عن طريق عدد من البيكسلات من كل جانب أنت تحدده.
    سوف نشرح في هذا الدرس خاصية
    padding و margin فهم من أسهل الخواص لكنك ستستخدمهم كثيرًا.

    ------------------------------------------------------------

    Padding

    أو ما يعرف بـ (الهوامش الداخلية) هي عبارة عن توسيع داخلي للعنصر بعدد بيكسلات من كل جانب
    على سبيل المثال هذا نص قمت بعمله مع خلفية ولون له:

    مشاهدة المرفق 169562

    الغرض من خاصية display هنا أن نجعل جزء النص هذا غير عريض جرب عدم كتابته.

    نجد أن لا يوجد أي مساحة داخلية فارغة في الخلفية

    مشاهدة المرفق 169563

    فعند إضافة خاصية
    padding بعدد 10 بيكسل مثلًا

    مشاهدة المرفق 169564

    سيتم توسيع
    10 بيكسل من جميع الجوانب

    مشاهدة المرفق 169565

    إذًا خاصية
    padding تستخدم لعمل توسيع داخلي للعنصر من الجوانب

    ويوجد أيضًا 4 خواص تابعه لـ
    padding كل خاصية لها جانب لتوسيعه

    padding-top: توسيع في الأعلى
    padding-bottom: توسيع في الأسفل
    padding-right: توسيع في اليمين
    padding-left: توسيع في اليسار

    ------------------------------------------------------------

    Margin

    تعرف بـ (الهوامش الخارجية) أي إبعاد العنصر عن باقي العناصر من الجوانب فهي لا تحتاج الشرح الكثير فإستخدامها مثل الـ padding.
    فسوف أقوم بإضافة الخاصية بقيمة
    50 بيكسل للنص الذي قمنا بعمله سابقًا

    مشاهدة المرفق 169566

    فسيبعد
    50 بيكسل عن كل جانب

    مشاهدة المرفق 169567

    إذًا خاصية
    margin لإبعاد العنصر عن بداية الصفحة & عن باقي العناصر من الجوانب

    ولها أيضًا أربع خواص أخرى من كل جانب

    margin-top: ابعاد في الأعلى
    margin-bottom: ابعاد في الأسفل
    margin-right: ابعاد في اليمين
    margin-left: ابعاد في اليسار

    ------------------------------------------------------------

    وهناك طريقة لكتابة كل 4 خواص تابعه لأي خاصية منهما في سطر واحد ففي بعض الأحيان نرى ناس يكتبون الخاصية هكذا

    مشاهدة المرفق 169568

    فهذا السطر يحتوي على الأربع جوانب لكل خاصية وتستخدم هذه الميزه لتقليل الأسطر

    فنحن نكتب في السطر أولًا المسافة في الأعلى ثم اليمين ثم الأسفل ثم اليسار

    مشاهدة المرفق 169569

    وكل مسافة لا تريد أن تكتبها تضع مكانها صفر فقط بدون علامة بيكسل ( 0 ).


    ------------------------------------------------------------

    خلاصة الدرس

    • الهوامش الخارجية هي عبارة عن إبعاد العنصر عن باقي العناصر من الجوانب / المسافة بين العنصر والعناصر الأخرى ويتم عملها بخاصية Margin.
    • الهوامش الداخلية هي عبارة عن توسيع في الداخل للعنصر من الجوانب ويتم عملها بخاصية Padding.
    • كل خاصية من الخاصيتين لها 4 خواص أخرى من كل جانب.
    • يمكن كتابة كل المسافات على سطر واحد (فوق ثم يمين ثم اسفل ثم يسار).
    • كل مسافة لا نريد كتابتها نضع مكانها 0 فقط بدون (px).
    [​IMG]
     
  2. ضياء الدين مصطفي

    ضياء الدين مصطفي زيزوومي VIP الأعضاء النشطين لهذا الشهر

    إنضم إلينا في:
    ‏ابريل 9, 2015
    المشاركات:
    4,763
    الإعجابات :
    3,184
    نقاط الجائزة:
    1,836
    الجنس:
    ذكر
    الإقامة:
    Cairo, Egypt
    برامج الحماية:
    avast
    نظام التشغيل:
    Windows 10
    جزاك الله خيرا أخي جعل الله جهودك ونشرك الطيب في ميزان حسناتك
     

مشاركة هذه الصفحة

جاري تحميل الصفحة...