الهامش الخارجي (Margin) في CSS
ترسم الصندوق وتحدّه وتدوّر زواياه. المهارة التالية: إبعاد الصناديق عن بعضها. margin هو الفراغ الخارجي حول العنصر — مساحة التنفس خارج الحد.
ما هو margin؟
الهامش مساحة فارغة حول خارج حد العنصر. يفصل صندوقاً عن جيرانه. لا يلوّن خلفية العنصر داخل هذا الفراغ — الفراغ خارج المنطقة المعبأة.
Margin مقابل padding (فرق سريع)
Padding (الدرس التالي) داخل الحد — بين المحتوى والحافة. Margin خارج الحد — بين هذا الصندوق والذي يليه. إن حفظت سطراً واحداً اليوم: margin = خارج، padding = داخل.
الاختصار: كم قيمة؟
يمكنك تمرير طول واحد أو اثنين أو ثلاثة أو أربعة. ترتيب الجوانب ثابت.
📊 عدد قيم اختصار margin
| القيم | المعنى | ملاحظة يومية |
|---|---|---|
| 1 | الجوانب الأربعة متساوية | تنفس متساوٍ حول البطاقة |
| 2 | أعلى+أسفل، ثم يسار+يمين | أزواج رأسية وأفقية |
| 3 | أعلى، يسار+يمين، أسفل | أقل شيوعاً — اعرف وجوده |
| 4 | أعلى، يمين، أسفل، يسار | تحكم كامل، مع عقارب الساعة من الأعلى |
فراغ متساوٍ على كل جانب
ابدأ بطول واحد لكل الجوانب.
نفس الهامش على كل الجوانب
css.card {
margin: 16px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}قيمتان — رأسي ثم أفقي
طولان يقرنان الجوانب المتقابلة: الأول أعلى وأسفل؛ الثاني يسار ويمين.
هامش رأسي ثم أفقي
css.panel {
margin: 24px 12px;
border: 1px solid #94a3b8;
padding: 1rem;
background-color: #f8fafc;
}أربع قيم — مع عقارب الساعة من الأعلى
حين يحتاج كل جانب فراغه: أعلى → يمين → أسفل → يسار.
اختصار الهامش بأربعة جوانب
css.note {
margin: 8px 20px 32px 20px;
border: 1px solid #0f766e;
padding: 0.75rem;
background-color: #ecfdf5;
}توسيط كتلة بـ auto
لصندوق مستوى الكتلة بعرض محدد، margin-left: auto وmargin-right: auto (غالباً margin: 0 auto) يقسمان الفراغ المتبقي على الجانبين — طريقة كلاسيكية لـ التوسيط الأفقي.
توسيط أفقي بـ auto
css.box {
width: 280px;
margin: 0 auto;
border: 2px solid #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}الهوامش الرأسية قد تنهار
حين يتراص عنصران كتليان، هامش أسفل الأول وهامش أعلى الثاني غالباً ينهاران (collapse) إلى فراغ واحد — عادة الأكبر منهما لا مجموعهما. يفاجئ المبتدئين؛ توقّعه بين الفقرات والأقسام المتتالية.
كتل متراصة مع انهيار الهامش
css.block-a {
margin-bottom: 24px;
background-color: #ccfbf1;
padding: 0.5rem;
}
.block-b {
margin-top: 24px;
background-color: #99f6e4;
padding: 0.5rem;
}
/* بينهما غالباً ترى نحو 24px لا 48px */جانب واحد في كل مرة
الخصائص الطويلة مثل margin-top ممتازة حين تحتاج فراغاً فوق عنوان أو تحت زر فقط.
هامش أعلى فقط
css.section-title {
margin-top: 2rem;
margin-bottom: 0.5rem;
margin-left: 0;
margin-right: 0;
}جرّبها بنفسك
- أعطِ بطاقتين
margin: 16pxوراقب الفراغ الخارجي. - أعد كتابة واحدة كـ
margin: 24px 12pxولاحظ الرأسي مقابل الأفقي. - وسّط صندوقاً بعرض 280px بـ
margin: 0 auto. - راصّ كتلتين ملونتين بـ
margin-bottomوmargin-topكلاهما 24px — قِس إن كان الفراغ يشبه 24 أم 48. - أبعد عنواناً بـ
margin-topفقط.
أخطاء شائعة
- استخدام margin حين تقصد padding (وسادة داخلية للنص)
- توقع أن
margin: autoيوسّط كل عنصر flex/grid كما يوسّط كتلة بسيطة (سياق التخطيط يهم) - إضافة هامش أعلى وأسفل وافتراض أنهما دائماً يُجمعان (الانهيار قد يصغّر الفراغ)
- هوامش ضخمة في كل مكان بدل مقياس صغير متسق
- خلط ترتيب القيم الأربع (أعلى، يمين، أسفل، يسار)
ملخص
- الهامش فراغ خارجي خارج الحد
- الاختصار: قيمة أو اثنتان أو أربع (الأربع مع عقارب الساعة من الأعلى)
margin: 0 autoيوسّط كتلة بعرض محدد أفقياً- الهوامش الرأسية بين الكتل المتراصة قد تنهار
- استخدم الخصائص الطويلة لجانب واحد عند الحاجة
- Padding هو ابن العم الداخلي — الدرس التالي
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى