تعرف على الفرق بين margin و padding في CSS بأسلوب مبسط مع شرح نموذج الصندوق (Box Model) وأمثلة عملية تساعدك في تنسيق صفحات الويب باحترافية. دليل مناسب للمبتدئين في تصميم المواقع.
الفرق بين Margin و Padding في CSS (شرح مبسط للمبتدئين)
عند تعلم CSS وتنسيق صفحات الويب، كثيرًا ما يصادفنا مفهومان أساسيان هما: margin و padding. هذان المصطلحان يبدوان متشابهين، لكن في الواقع لكل منهما وظيفة مختلفة تمامًا داخل نموذج الصندوق (Box Model) في CSS.
في هذه المقالة، سنشرح لك الفرق بين margin و padding بأسلوب بسيط مع أمثلة توضيحية تساعدك على الفهم والتطبيق.
ما هو Box Model في CSS؟
قبل أن نتحدث عن الفرق بين margin و padding، يجب أن نعرف أولاً أن كل عنصر في صفحة الويب يُمثّل كصندوق (Box) يتكوّن من أربعة أجزاء رئيسية:
- Content: محتوى العنصر (نص، صورة، إلخ).
- Padding : المسافة بين المحتوى وحدود العنصر.
- Border : الخط المحيط بالعنصر.
- Margin : المسافة بين العنصر والعناصر الأخرى المحيطة به.
ما هو Padding في CSS؟
- Padding هو المسافة الداخلية بين محتوى العنصر وحدوده.
- يُستخدم padding لتوفير مساحة داخلية داخل العنصر حتى لا يلتصق المحتوى بحواف العنصر.
- padding لا يؤثر على العناصر المجاورة، فقط على داخل العنصر نفسه.
مثال على استخدام padding:
ما هو Margin في CSS؟
- Margin أو "الهامش" هو المسافة الخارجية بين العنصر والعناصر الأخرى حوله.
- يُستخدم margin لإبعاد العنصر عن عناصر أخرى، أو لتوسيطه مثلًا داخل الصفحة.
- margin لا يؤثر على شكل العنصر الداخلي، بل المسافة بينه وبين العناصر المحيطة.
مثال على استخدام margin:
يعني هذا وجود 30 بكسل كمسافة تفصل هذا العنصر عن أي عنصر خارجي.
الفرق الرئيسي بين Margin و Padding
متى تستخدم Margin ومتى تستخدم Padding؟
- استخدم padding عندما تريد إنشاء مساحة داخل العنصر بين المحتوى والحدود.
- استخدم margin عندما تريد فصل العنصر عن العناصر المحيطة به أو عند ترتيب التخطيط العام للصفحة.
ما الفرق بين margin و padding؟ difference between margin & padding
نصائح مهمة للمبتدئين:
- عند استخدام كل من margin و padding، راقب المساحات جيدًا لأنها تؤثر على التصميم النهائي.
- استخدم أدوات المتصفح (مثل فحص العنصر – DevTools) لرؤية نموذج الصندوق مباشرة.
- جرب إعدادات مختلفة مثل:
خلاصة الفرق بين Margin و Padding
- Padding: مسافة داخلية – يؤثر على المساحة بين المحتوى وحدود العنصر.
- Margin: مسافة خارجية – يؤثر على المسافة بين العنصر والعناصر المحيطة به.
- معرفة الفرق بين margin و padding ضروري لأي مصمم أو مطور واجهات أمامية. يساعدك ذلك على بناء صفحات ويب منظمة ومتناسقة بصريًا.
