ما هو كود margin الموجود ضمن أكواد الـ css ؟
 |
| شرح كود التحكم بحافة العناصر margin في أكواد الـ css المسؤولة عن التنسيق |
كما هو معلوم فإن أكواد الـ CSS هي الأكواد المسؤولة عن التنسيق العام للصفحة أو الموقع و الـ id و الـ class و الفقرات و جميع الإضافات ، و بداخل هذا القسم نستطيع التحكم بكافة العناصر و الأقسام الموجودة ضمن التخطيط العام للصفحة .
لكل قسم أو عنصر أو id أو class يوجد تعريف له و هو الإسم و عندما نريد عمل تنسيق ما لأي عنصر من العناصر نقوم في البداية بالتعريف ما هو العنصر الذي نريد إضافة التنسيقات التي نريدها له .
و في شرح كود اليوم سوف نقوم بشرح كود margin و هو الكود المسؤول عن حواف العنصر لإنشاء مسافة خارج حدود هذا العنصر بقيّم نحن لدينا السيطرة عليها و نتحكم بها بحسب حاجتنا لها .
و في الكود " الموجود في الأسفل ضمن الصندوق " قمنا بطرح مثال لكيفية عمل هذا الكود و طريقة تنفيذه و كيف يظهر للمُستخدم ، و تقصدنا تجربته على نص لكي تشاهد كيف يظهر و يعمل هذا الكود .
و قد عرّفنا في أكواد الـ css على أن يتم تطبيق هذا الكود على الـ div الذي قمنا بإنشائه و سوف يتم تطبيق الكود على جميع العناصر الموجود ضمن هذا الـ div الذي قمنا بعمله و دون تخصيص لأي عنصر داخله ، فإذا أردنا تخصيص الكود لعنصر داخل هذا الـ div مثلاً لـ class أو id موجود داخل الـ div نقوم بتخصيصه عبر أخذ نفس اسم الـ class أو الـ id و نقوم بتعريفه في أكواد الـ css .
مثلاً لنفرض أنه يوجد class أو id معيّن ضمن الـ div و نريد تخصيصه و ليكن كما هو في الكود التالي :
<div id='search'>
<div class='test'>
<a href='https:www.google.com' title='Search' target='_blank'> Click </a></div> </div>
كما نُشاهد داخل الـ div يوجد class و id فإذا لم نخصص أكواد الـ css فسوف يتم تطبيق الكود الموجود في الشرح بالأسفل على كافة العناصر الموجودة ضمن الـ div ، أما إذا خصصنا التنسيق لعنصر داخل و لنفرض لـ class أو id فسوف يتم التطبيق على جميع الـ class الموجودة في الصفحة التي تأخذ اسم test ، " نتمنى أن تكون قد وصلت الفكرة " .
أما بالنسبة لكود margin فهو يتحكم بحجم المسافة الخارجية للعنصر في التخطيط و في شرح القيّم الأربعة و هي :
margin: 5px 10px 15px 20px
5px : التحكم بالمسافة بإتجاه الأسفل .
10px : التحكم بالمسافة بإتجاه اليسار .
15px : التحكم بالمسافة بإتجاه الأعلى .
20px : التحكم بالمسافة بإتجاه اليمين .
و عند استخدام هذا الكود سوف يتم تطبيق المسافة و القيّم بحسب مكان تواجد العنصر و المساحة الموجودة ضمن التخطيط الخاص بهذا العنصر .
الكود المُستخدم في الشرح :
بعد تنفيذ و تطبيق الكود يظهر للمُستخدم على الشكل التالي :
 |
| margin |
إرسال تعليق