إعلان
تعلم الآن

CSS الهوامش الخارجية

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

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

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

You can use auto margin to center the element too

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

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


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

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

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

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

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

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

ملاحظة

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


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

لملاحظة كم تبعد العناصر عن بعضها البعض يمكنك إظهار حدودها ( 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;
}
		
تجربة الكود

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

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

مثال

div {
	margin: 20px 15px 10px;
}
		
تجربة الكود

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

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

مثال

div {
	margin: 20px 15px 10px 5px;
}
		
تجربة الكود

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

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


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

مثال

p {
	margin: 0;
}
		
تجربة الكود

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

مثال

.demo {
	margin: 20px 0;
}
		
تجربة الكود

ملاحظة

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

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

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

الهوامش الخارجية الموجودة بين العناصر من جهة الأعلى و الأسفل يقوم المتصفح بدمج بشكل تلقائي لكي يجعل طول الصفحة أقل و هذا الأمر يسمى 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;
}
		
تجربة الكود

ملاحظة

في المثال السابق كان بإمكانك كتابة display: grid; بدل display: grid; و الحصول على ذات النتيجة.

عرض محتوى الصفحة بأسلوب Flex و Grid أمر مهم جداً و سنشرحه لك بالتفصيل في دروس لاحقة لذا لا تشغل بالك بالكود الذي كتبناه بآخر مثال، يكفي أن تعرف أنه يوجد حيل كثيرة في CSS تسمح لك بعرض المحتوى بالشكل الذي تريده.

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة