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

المصدر: دورة تعلم لغة CSS | Margin & Padding (13)
في منتدى : منتدى الدّورات العامّة ولُغات البرمجة

مرحبا إخوتي أعضاء منتديات زيزووم للأمن والحماية
اليوم سأشرح لكم في دورة تعلم لغة 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).

 

جزاك الله خيرا أخي جعل الله جهودك ونشرك الطيب في ميزان حسناتك