الهامش
الهامش
الهامش درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 1 من أصل 1. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 1 دروس في المجموع.
مقدمة
تُعدّ Margin من أهم موضوعات CSS.
الهوامش هي المساحات التي ننشئها حول حدود العنصر.
شرح جوانب Margin
بغضّ النظر عن نوع العنصر، عند إنشاء Margin، يجب ألا نفكر فيها على أنها موزعة على أربعة اتجاهات (الأعلى، اليمين، الأسفل، واليسار).
<style>
.box{
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
width:100px;
height:100px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
<div class="box">Box with margin</div>تحذير
كما يمكننا إعطاء قيمة محددة للخاصية margin، يمكننا أيضًا إعطاؤها قيمة نسبية مئوية.
تحذير
كما يمكننا إعطاء قيمة محددة لـ margin، يمكننا أيضًا إعطاؤها قيمة نسبية مئوية.
اختصار Margin
في المثال السابق، كان علينا كتابة 4 أسطر من التعليمات البرمجية لتعيين Margin لجميع جوانب الصندوق.
يوفر CSS اختصارًا لـ margin لكتابة تعليمات برمجية أقصر.
بعد تعريف الخاصية margin، يمكننا تعيين قيم margin مع ترك مسافة بينها، بالترتيب: الأعلى، واليمين، والأسفل، واليسار (أي باتجاه عقارب الساعة).
<style>
.box {
margin: 10px 10px 10px 10px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
تحذير بشأن margin السالبة
يمكن أن تأخذ Margins قيمة سالبة. أما Paddings التي سنراها في الدرس التالي، فلا يمكن أن تأخذ قيمة سالبة.
margin auto
سنستخدم القيمة auto للخاصية margin لتوسيط عناصرنا أفقيًا. وبغضّ النظر عن دقة الشاشة، سيظهر العنصر في منتصفها أفقيًا.
لنفترض أن عرض الشاشة هو 1200px، وأن عرض عنصرنا هو 400px. سيُوسَّط العنصر مع وجود مساحتين بعرض 400px على اليمين واليسار.
<style>
.box {
width:200px;
margin: auto;
background-color: powderblue;
}
</style>
<div class="box">
This element will be horizontally
centered because
it has margin: auto;
</div>تهانينا
تهانينا 🎉
في هذا القسم، تعلمنا CSS Margins.
في القسم التالي، سنتعلم CSS Paddings.
الأسئلة الشائعة
هل درس «الهامش» مجاني؟
نعم — نص درس «الهامش» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 1 دروس في المجموع.
ماذا ستتعلم في «الهامش»؟
الهامش تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟
لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 1.
كم من الوقت يستغرق درس «الهامش»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟
نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.