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