أساسيات لغة css
في هذه الصورة رمزنا لعنصر html باللون الأخضر ، واللون الأصفر يرمز للإزاحة الداخلية padding لهذا العنصر ، واللون البرتقالي يرمز للإزاحة الخارجية margin لنفس العنصر ، وبالتالي تبين هذه الصورة ككل الحيز الفعلي الذي يحتله عنصر html في الصفحة ، إذ أن كل عنصر لديه مقدار افتراضي كقيمة للخاصية padding وآخر افتراضي كقيمة للخاصية margin يختلفان من متصفح إلى آخر.
ومن هذه الصورة نستنتج تعريفا أوضح للخاصيتين:
خاصية padding : تأخذ القيمة ب px أو em أو % ، وهي مقدار الإزاحة بين عنصر html وحدوده.
خاصية margin :تأخذ القيمة ب px أو em أو % ، وهي مقدار الإزاحة بين حدود عنصر html والعناصر الأخرى.
التطبيق العملي للخاصية margin
margin-top
margin-bottom
margin-right
margin-left
سنجرب ذلك مع كود html التالي:
ديفات ب id مختلف و class واحدة سنستخدمها للتنسيقات الموحدة ، وهذا هو كود css وخاصية margin مؤجلة :
وهذه هي النتيجة:
والنتيجة تباعد الديفات عن بعضها بنفس المقدار ومن جميع الإتجاهات:
والنتيجة :
هذا فقط للتمكن من صيغة الكتابة ، يمكنك تجريب القيم ومختلف الطرق على ديف واحد والملاحظة ، وإن شاء الله في المستقبل مع الأمثلة العملية الحقيقية لن يكون هناك مشكل بإذن الله.
نكتفي بهذا القدر وموعدنا في الدرس القادم مع الجزء الثاني من الإزاحة في لغة css ، وفي انتظار ذلك ، دمتم في رعاية الله وحفظه.
