CSS / الهوامش الخارجية (Margin)

الناشر :كودا فوكس -

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

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

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

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


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

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.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋

     
    <!DOCTYPE html>
<html>
	<head>
        <style>
.demo {
	margin-top: 60px;
	margin-left: 40px;
	margin-right: 10px;
	margin-bottom: 30px;
	border: 1px solid gray;
}
        </style>
	</head>
	<body>
        <h2>CSS margin sides</h2>
        <p class="demo">This element has a top margin of 60px,
            a bottom margin of 30px, a right margin of 10px,
			and a left margin of 40px.</p>
    </body>
</html>

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

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
 <!DOCTYPE html>
<html>
	<head>
        <style>
.demo {
	margin-top: -30px;
	border: 1px solid gray;
}
        </style>
	</head>
	<body>
        <h2>CSS margin</h2>
        <p class="demo">This element has a negative top margin of 30px.</p>
    </body>
</html>

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

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
 <!DOCTYPE html>
<html>
	<head>
        <style>
div {
	margin: 30px;
	border: 1px solid gray;
}
        </style>
	</head>
	<body>
        <h2>CSS margin shorthand</h2>
        <div>This element has a 30px margin on all sides.</div>
		<p>There is 30px margin above this element.</p>
    </body>
</html>

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style>
div {
	margin: 20px 15px;
	border: 1px solid gray;
}
        </style>
	</head>
	<body>
        <h2>CSS margin shorthand</h2>
        <div>This element has a 20px margin on top and bottom
			and a 15px margin on right and left.</div>
		<p>There is 20px margin above this element.</p>
    </body>
</html>

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style>
div {
	margin: 20px 15px 10px;
	border: 1px solid gray;
}
        </style>
	</head>
	<body>
        <h2>CSS margin shorthand</h2>
        <div>This element has a 20px margin on the top,
			a 15px margin on right and the left
			and a 10px margin on the bottom.</div>
		<p>There is 10px margin above this element.</p>
    </body>
</html>

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style>
div {
	margin: 20px 15px 10px 5px;
	border: 1px solid gray;
}
        </style>
	</head>
	<body>
        <h2>CSS margin shorthand</h2>
        <div>This element has a 20px margin on the top,
			a 15px margin on the right,
			a 10px margin on the bottom
			and a 10px margin on the left.</div>
		<p>There is 10px margin above this element.</p>
    </body>
</html>

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

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style>
p {
	margin: 0;
	border: 1px solid gray;
}
        </style>
	</head>
	<body>
        <h2>CSS margin shorthand</h2>
        <p>This element has no margin.</p>
        <p>This element has no margin.</p>
    </body>
</html>

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style>
.demo {
	margin: 20px 0;
	border: 1px solid gray;
}
        </style>
	</head>
	<body>
        <h2>CSS margin shorthand</h2>
        <div class="demo">This element has a 20px margin on top and bottom.</div>
        <div>This element has a 20px margin on top and bottom.</div>
    </body>
</html>

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

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

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

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
 <!DOCTYPE html>
<html>
	<head>
        <style>
.one {
	margin-bottom: 30px;
	border: 1px solid gray;
}

.two {
	margin-top: 30px;
	border: 1px solid gray;
}
        </style>
	</head>
	<body>
        <h2>CSS margin shorthand</h2>
        <div class="one">bottom margin is collapsed.</div>
        <div class="two">top margin is collapsed.</div>
        <p>The margin bettween the two div is collapsed
            to a single margin of 30px height.</p>
    </body>
</html>

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

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


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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style>
div {
	margin: auto;
	width: 250px;
	border: 1px solid gray;
}
        </style>
	</head>
	<body>
        <h2>CSS margin auto</h2>
        <div>Element is centered horizontaly.</div>
		<p>Note: if width is not defined, the element
			will take the full width.</p>
    </body>
</html>

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
 <!DOCTYPE html>
<html>
	<head>
        <style>
* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
            
body {
    display: flex;
    min-height: 100vh;
    align-items: center;
}
            
div {
    margin: auto;
	border: 1px solid gray;
}
        </style>
	</head>
	<body>
        <div>Element is centered horizontaly.</div>
    </body>
</html>

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

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

التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال