مفهوم الهامش الخارجي

الهامش الخارجي ( Margin ) هو المسافة الفارغة التي يمكن وضعها حول العنصر من الخارج لتحديد بعده عن العناصر الأخرى الموضوعة في الصفحة.

حجم الهامش الخارجي للعنصر يمكنك تحديده من كل الجهات أو من جهات محددة.

الفرق بين الهامش الداخلي و الهامش الخارجي

تذكر دائماً أن الهامش الداخلي يكون بين المحتوى و الحدود التي يمكن إضافتها للعنصر أما الهامش الخارجي فيكون خارج حدود العنصر.

الصورة التالية توضّح مكان الهامش الداخلي ( Padding ) و الهامش الخارجي ( Margin ) و الحدود ( Border ) بالنسبة للعنصر.

إضافة هامش الخارجي من جهة محددة

الخصائص التالية تستخدم لتحديد حجم الهامش الخارجي من جهة محددة:

• margin-top لتحديد حجم الهامش الخارجي للعنصر من الأعلى.
• margin-bottom لتحديد حجم الهامش الخارجي للعنصر من الأسفل.
• margin-right لتحديد حجم الهامش الخارجي للعنصر من الجهة اليمنى.
• margin-left لتحديد حجم الهامش الخارجي للعنصر من الجهة اليسرى.

فيما يلي القيم التي يمكن وضعها كحجم للهامش الخارجي:

• auto لجعل المتصفح يحسب نسبة الهامش الخارجي من الجوانب بشكل تلقائي.
• inherit لجعل العنصر يرث نسبة الهامش الخارجي من العنصر الموجود فيه.
• length نقصد بها وضع رقم بوحدة قياس محددة مثل px، pt، cm، % ليمثل حجم الهامش.

رؤية تأثير الهامش الخارجي

لملاحظة كم تبعد العناصر عن بعضها البعض يمكنك إظهار حدودها ( Border ).

في المثال التالي قمنا بإضافة حدود و هامش خارجي للعنصر الذي يملك الكلاس demo.

.demo {
    margin-top: 60px;
    margin-left: 40px;
    margin-right: 10px;
    margin-bottom: 30px;
    border: 1px solid gray;
}

إضافة هامش بالسالب

قيمة الهامش الخارجي يمكن وضعها بالسالب مثل -20px أو -50% و هذا الأمر يجعل الهامش يطبّق بشكل عكسي، حيث يصبح العنصر يقترب من العناصر الأخرى بعد الإبتعاد عنها.

في المثال التالي قمنا بإضافة هامش علوي بالسالب لجعل العنصر يتراجع للأعلى بنسبة 30 بكسل.

.demo {
    margin-top: -30px;
}

تحديد الهامش الخارجي من كل الجهات بسطر واحد

بواسطة الخاصة margin يمكنك تحديد حجم الهامش الخارجي من كل الجوانب. و هنا نود الإشارة إلى أنه على حسب عدد القيم التي تمررها لهذه الخاصية فإنه سيتم تحديد أي جهة سيتم إضافة الهامش فيها و هذا الأمر ستراه بدقة في الأمثلة التالية.

في المثال التالي قمنا بإضافة هامش داخلي للعنصر بمقدار 30 بكسل من كل الجوانب.

div {
    margin: 30px;
}

إذا قمت بتمرير قيمتين للخاصية margin سيحدث التالي:

• القيمة الأولى ستمثل حجم الهامش الخارجي جهتي الأعلى و الأسفل.
• القيمة الثانية ستمثل حجم الهامش الخارجي جهتي اليمين و اليسار.

div {
    margin: 20px 15px;
}

إذا قمت بتمرير ثلاث قيم للخاصية margin سيحدث التالي:

• القيمة الأولى ستمثل حجم الهامش الخارجي في الأعلى.
• القيمة الثانية ستمثل حجم الهامش الخارجي جهتي اليمين و اليسار.
• القيمة الثالثة ستمثل حجم الهامش الخارجي في الأسفل.

div {
    margin: 20px 15px 10px;
}

إذا قمت بتمرير أربع قيم للخاصية margin سيحدث التالي:

• القيمة الأولى ستمثل حجم الهامش الخارجي في الأعلى.
• القيمة الثانية ستمثل حجم الهامش الخارجي جهة اليمين.
• القيمة الثالثة ستمثل حجم الهامش الخارجي في الأسفل.
• القيمة الرابعة ستمثل حجم الهامش الخارجي جهة اليسار.

div {
    margin: 20px 15px 10px 5px;
}

إزالة الهامش الخارجي للعنصر

إذا أردت إزالة الهامش للعنصر من جهة محددة، يمكنك وضع قيمة الهامش الخاصة به تساوي 0.

في المثال التالي قمنا بإزالة الهامش الخارجي الإفتراضي للعنصر <p>من كل الجهات، و هذا يعني أنه في حال وضع إثنين وراء بعض سيظهران ملتصقان ببعضهما.

p {
    margin: 0;
}

في المثال التالي قمنا بإضافة هامش خارجي في أعلى و أسفل العنصر الذي يملك الكلاس demo بمقدار 20 بيكسل و قمنا بإزالة أي هامش من الجانبين الأيمن و الأيسر.

.demo {
    margin: 20px 0;
}

مفهوم دمج الهوامش الخارجية للعناصر

الهامش الخارجي للعنصر فكرته أن يكون العنصر بعيد عن العنصر الآخر بالمقدار الذي تم وضعه.

الهوامش الخارجية الموجودة بين العناصر من جهة الأعلى و الأسفل يقوم المتصفح بدمج بشكل تلقائي لكي يجعل طول الصفحة أقل و هذا الأمر يسمى Margin Collapse.

في المثال التالي سيتم العنصر الأعلى يملك هامش خارجي من الأسفل بمقدار 30 بكسل و العنصر الأسفل يملك هامش خارجي من الأعلى بمقدار 30 بكسل الأمر الذي جعل المتصفح يقوم بدمج هذا الهامش كهامش واحد بمقدار 30 بكسل لأن هذه المسافة القصوى التي يتطلبها إبعاد العنصرين عن بعضمها.

.one {
    margin-bottom: 30px;
}

.two {
    margin-top: 30px;
}

توسيط العناصر بواسطة الهامش الخارجي

توسيط العنصر سواء بالنسبة للصفحة أو بالنسبة للعنصر الخارجي الموضوع فيه ممكن في حال كان للعنصر طول و عرض محدد.

توسيط العنصر أفقياً

في المثال التالي قمنا بتحديد عرض العنصر بواسطة الخاصية width و من بعدها أضفنا له الخاصية margin:auto; لكي يظهر في وسط الصفحة أفقياً.

div {
    width: 250px;
    margin: auto;
}

توسيط العنصر أفقياً و عمودياً

في المثال التالي قمنا بجعل العنصر <body> يتمدد على كامل حجم الصفحة بواسطة أسلوب العرض Flex و من ثم أضفنا للوسم <div> الخاصية margin:auto; لكي يظهر في وسط الصفحة تماماً أفقياً و عمودياً.

body {
    display: flex;
    min-height: 100vh;
    align-items: center;
}

div {
    margin: auto;
}