ال ' الهامش العلوي ”تساعد الكثير من المطورين في إنشاء تخطيطات سريعة الاستجابة وتحديد مواضع عناصر HTML. يوفر استخدام خاصية 'margin-top' مزيدًا من التحكم في عناصر HTML ، ويضيف فصلًا بصريًا ، ويساعد في إنشاء تصميمات أفضل استجابة. يوضح هذا الدليل خاصية margin-top مع التنفيذ العملي في CSS.
- ما هي خاصية 'margin-top'؟
- استخدم خاصية 'margin-top' ذات القيمة الإيجابية
- استخدم خاصية 'margin-top' ذات القيمة السلبية
ما هي خاصية 'margin-top'؟
ال ' الهامش العلوي 'يتم استخدام الخاصية لإنشاء مسافة إضافية بين عناصر HTML. يمكن تعيينه بقيم موجبة وسالبة. يتم تعيين هذه القيم وفقًا لاحتياجات التصميم وتساعد في منع التداخل وضبط التباعد بين عناصر HTML.
كيفية استخدام خاصية 'margin-top' ذات القيمة الإيجابية؟
تضيف خاصية 'margin-top' ذات القيمة الموجبة مسافات إضافية من الموضع العلوي باتجاه مركز عنصر HTML المحدد. يمكن أن تكون القيمة المقدمة بوحدات البكسل ، أو النسبة المئوية ، أو rem ، أو في القيم العامة مثل auto ، و incit ، و unset ، وما إلى ذلك. دعنا نعرض مثالاً لفهم أفضل:
مثال: استخدام القيمة الإيجابية
لنفترض أن ملف HTML ينشئ ' بعد إنشاء بنية HTML ، قم بتطبيق خصائص CSS على ' إيجابي ' فصل: في مقتطف الشفرة أعلاه: بعد تنفيذ مقتطف الشفرة أعلاه ، تبدو صفحة الويب كما يلي: يوضح gif أعلاه تأثير تعيين قيمة خاصية margin-top على صفحة الويب. ال ' الهامش العلوي 'ذات القيمة السالبة التي تحدد مسافات إضافية من الموضع العلوي المقابل للمركز أو باتجاه الجزء الخارجي من الصفحة بالنسبة لعنصر HTML المحدد. يتم استخدامه في الغالب لإنشاء تأثيرات متداخلة أو في تحديد موضع عنصر HTML. دعونا نسير من خلال مثال لفهم أفضل. مثال: استخدام القيمة السالبة لنفترض أن ملف HTML ينشئ ' وصف مقتطف الشفرة المذكور أعلاه موضح أدناه: بعد تنفيذ مقتطف الشفرة أعلاه ، تظهر صفحة الويب على النحو التالي: يعرض gif أعلاه التأثير الذي يحدث على تصميم صفحة الويب من خلال تعيين القيمة السلبية لخاصية margin-top. ال ' الهامش العلوي 'يتم استخدام الخاصية لإنشاء مسافة إضافية بين عناصر HTML. يمكن تعيينه بقيم موجبة وسالبة. إذا تم تعيين خاصية 'margin-top' بقيمة موجبة ، فستتم إضافة المساحة الإضافية باتجاه مركز صفحة الويب أو عنصر HTML المحدد. في حالة وجود قيمة 'سالبة' ، تتم إضافة المسافة ولكن باتجاه الجزء الخارجي من الصفحة. توضح هذه المقالة ماهية خاصية margin-top في CSS.
< جسم >
< شعبة فصل = 'إيجابي' >
< ص > يتم تعيين أعلى الهامش بقيمة موجبة ص >
شعبة >
جسم >
< أسلوب >
.إيجابي {
العرض: 300 بكسل ؛
الارتفاع: 200 بكسل ؛
لون الخلفية: فورستجرين.
حجم الخط: 20 بكسل ؛
لون: #fff ؛
أعلى الهامش: 50 بكسل ؛
}
أسلوب >
كيفية استخدام خاصية 'margin-top' ذات القيمة السلبية؟
.سلبي {
اللون الابيض؛
محاذاة النص: مركز ؛
لون الخلفية: أحمر ؛
الهامش العلوي: -30 بكسل ؛
الحشو: 30 بكسل ؛
الارتفاع: 100 بكسل ؛
}
أسلوب >
< جسم >
< شعبة فصل = 'سلبي' >
تم تعيين القيمة السالبة ل خاصية Margin-top
شعبة >
جسم >
خاتمة