خاصية Margin
آخر تحديث: 2026-09-13
margin خاصية Margin
تضبط خاصية margin المساحة حول العنصر، أي المسافة بين حدوده والعناصر المجاورة. إنها واحدة من أكثر خصائص نموذج الصندوق استخدامًا، وتُستخدم للتحكم في التباعد بين العناصر وتوسيط العناصر أفقيًا وإضافة مساحة للتنفس. يمكن أن تكون الهوامش أطوالًا ثابتة أو نسبًا مئوية أو auto للقيم التي يحسبها المتصفح.
| الفئة | |
|---|---|
| القيمة الأولية | 0 |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | length |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
margin: <length> | <percentage> | auto;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | كلمة مفتاحية | يحسب المتصفح الهامش تلقائيًا. |
<length> | النوع | قيمة هامش ثابتة. |
<percentage> | النوع | نسبة مئوية بالنسبة لعرض الكتلة الحاضنة. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| margin | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تحذير： تنهار الهوامش الرأسية المتجاورة (margin collapse): الفجوة الفعلية هي الأكبر من القيمتين، لا مجموعهما.
تلميح： يُوسّط margin:0 auto; عنصرًا على مستوى الكتلة أفقيًا داخل الأصل (يحتاج إلى عرض محدد).
❓ الأسئلة الشائعة
Qما الفرق بين margin و padding؟
Aالـ margin هو المساحة خارج الحدود، ويتحكم في المسافة من العناصر المجاورة وحواف الحاوية، وتُسمح به القيم السلبية. أما padding فهو المساحة بين المحتوى والحدود، ويتحكم في بعد المحتوى عن حواف الصندوق، ولا يمكن أن يكون سالبًا. كما يمد padding الخلفية ومنطقة النقر، وهو ما لا يفعله margin، ولا ينهار سوى الهوامش الرأسية. عند الشك، استخدم margin لفجوات التخطيط و padding للمساحة الداخلية.
Qلماذا يوسّط margin:auto أفقيًا فقط وليس رأسيًا؟
Aتقسم عناصر مستوى الكتلة تلقائيًا المساحة الفارغة من الهامش الأفقي بين اليمين واليسار، مما يوسّطها؛ ولا يملك التدفق العادي آلية مكافئة للمحور الرأسي. للتوسيط الرأسي، اجعل الأصل حاوية flex عبر display:flex; align-items:center; justify-content:center، أو حاوية grid عبر display:grid; place-items:center. وفي grid يمكنك أيضًا استخدام margin:auto على العنصر نفسه، لأن هوامش auto تمتص المساحة الحرة في كلا المحورين.
Qما هو margin collapse؟
Aفي الاتجاه الرأسي، لا تُجمع هوامش الأعلى والأسفل للعناصر المتجاورة؛ الفجوة هي الأكبر من القيمتين. هذا هو margin collapse. كما قد يفلت margin-top للابن من الأصل ويدفع الأصل نفسه للأسفل. لمنعه، أضف padding أو border إلى الأصل، أو اضبط overflow:hidden، أو استخدم flex أو grid. ولا تُطوّى الهوامش الأفقية أبدًا، لذا لا يؤثر ذلك إلا على التباعد الرأسي.
Qإلى ماذا تُنسب النسبة المئوية لـ margin؟
Aتُحل الهوامش دائمًا بالنسبة لعرض الكتلة الحاضنة، أي حجمها المضمّن، بما في ذلك margin-top و margin-bottom، اللتان تُحسبان من العرض لا من الارتفاع. على سبيل المثال، مع أصل عرضه 400px، يكون margin-top:10% مساويًا لـ 40px. إنها قاعدة مقصودة في CSS كثيرًا ما تفاجئ الناس، لذا تستحق التذكر عند استخدام هوامش النسب المئوية، خاصة للتباعد الرأسي في التخطيطات المتجاوبة.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
نموذج الصندوق CSS
افهم العلاقة بين content و padding و border و margin.
padding (خاصية Padding)
تعلّم عن المساحة داخل العنصر.
