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