CSS Tutorial

الهوامش - Margin

المفهوم

الهوامش عبارة عن مساحات فارغة حول نص أو عنصر في الصفحة. وهي مفيدة لإنشاء فراغ بين العناصر، والتحكم في موضعها.

أنواع الهوامش

  • الهامش العلوي: المساحة الفارغة أعلى النص أو العنصر.
  • الهامش الأيمن: المساحة الفارغة على يمين النص أو العنصر.
  • الهامش السفلي: المساحة الفارغة أسفل النص أو العنصر.
  • الهامش الأيسر: المساحة الفارغة على يسار النص أو العنصر.

الخطوات العملية لإنشاء الهوامش

  • حدد النص أو العنصر الذي تريد إنشاء هوامش له.
  • انقر بزر الماوس الأيمن وحدد "النمط".
  • في نافذة النمط، ابحث عن علامة التبويب "هوامش".
  • أدخل القيم المرغوبة في حقول التحرير لتعيين الهوامش.

مثال CSS

لإنشاء مساحة بين عنصرين والتحكم في موضعها باستخدام CSS، يمكنك استخدام الخاصية "margin".

/* عنصر 1 */
#element1 {
  margin: 20px;
}

/* عنصر 2 */
#element2 {
  margin-top: 50px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 30px;
}

نصائح لتحسين سهولة الاستخدام

  • استخدم هوامش كافية لجعل النص مقروءًا وممتعًا للعين.
  • حافظ على التناسق في استخدام الهوامش في جميع أنحاء الصفحة.
  • تجنب استخدام هوامش كبيرة جدًا، والتي يمكن أن تجعل الصفحة تبدو فوضوية.