-->
U3F1ZWV6ZTU1MTYyNTY0NTFfQWN0aXZhdGlvbjYyNDkxNTc4MDk4

شرح كود التحكم بحافة العناصر margin في أكواد الـ css المسؤولة عن التنسيق

ما هو كود margin الموجود ضمن أكواد الـ css ؟

شرح كود التحكم بحافة العناصر 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
margin

ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

الاسمبريد إلكترونيرسالة

تم الكشف عن مانع الإعلانات

الإعلانات تساعدنا في تمويل موقعنا، فالمرجو تعطيل مانع الإعلانات وساعدنا في تقديم محتوى حصري لك. شكرًا لك على الدعم ❤️