CSSالهوامش الخارجية
- مفهوم الهامش الخارجي
- الفرق بين الهامش الداخلي و الهامش الخارجي
- إضافة هامش الخارجي من جهة محددة
- تحديد الهامش الخارجي من كل الجهات بسطر واحد
- إزالة الهامش الخارجي للعنصر
- مفهوم دمج الهوامش الخارجية للعناصر
- توسيط العناصر بواسطة الهامش الخارجي
مفهوم الهامش الخارجي
الهامش الخارجي ( Margin ) هو المسافة الفارغة التي يمكن وضعها حول العنصر من الخارج لتحديد بعده عن العناصر الأخرى الموضوعة في الصفحة.
حجم الهامش الخارجي للعنصر يمكنك تحديده من كل الجهات أو من جهات محددة.
الفرق بين الهامش الداخلي و الهامش الخارجي
تذكر دائماً أن الهامش الداخلي يكون بين المحتوى و الحدود التي يمكن إضافتها للعنصر أما الهامشر الخارجي فيكون خارج حدود العنصر.
الصورة التالية توضّح مكان الهامش الداخلي ( Padding ) و الهامش الخارجي ( Margin ) و الحدود ( Border ) بالنسبة للعنصر.
إضافة هامش الخارجي من جهة محددة
الخصائص التالية تستخدم لتحديد حجم الهامش الخارجي من جهة محددة:
- margin-top لتحديد حجم الهامش الخارجي للعنصر من الأعلى.
- margin-bottom لتحديد حجم الهامش الخارجي للعنصر من الأسفل.
- margin-right لتحديد حجم الهامش الخارجي للعنصر من الجهة اليمنى.
- margin-left لتحديد حجم الهامش الخارجي للعنصر من الجهة اليسرى.
فيما يلي القيم التي يمكن وضعها كحجم للهامش الخارجي:
- auto لجعل المتصفح يحسب نسبة الهامش الخارجي من الجوانب بشكل تلقائي.
- inherit لجعل العنصر يرث نسبة الهامش الخارجي من العنصر الموجود فيه.
- length نقصد بها وضع رقم بوحدة قياس محددة مثل
px،pt،cm،%ليمثل حجم الهامش.
الخاصية auto تستخدم بشكل خاص لتوسيط العنصر، أي لجعل العنصر يظهر في وسط المكان الموضوع فيه و لكن هذا الأمر له بعض الشروط التي يجب مراعتها حتى ينجح، سنتطرق لهذا الأمر بشكل عملي في نهاية الدرس.
رؤية تأثير الهامش الخارجي
لملاحظة كم تبعد العناصر عن بعضها البعض يمكنك إظهار حدودها ( Border ).
في المثال التالي قمنا بإضافة حدود و هامش خارجي للعنصر الذي يملك الكلاس demo.
مثال
إضافة هامش بالسالب
قيمة الهامش الخارجي يمكن وضعها بالسالب مثل -20px أو -50% و هذا الأمر يجعل الهامش يطبّق بشكل عكسي، حيث يصبح العنصر يقترب من العناصر الأخرى بعد الإبتعاد عنها.
في المثال التالي قمنا بإضافة هامش علوي بالسالب لجعل العنصر يتراجع للأعلى بنسبة 30 بكسل.
تحديد الهامش الخارجي من كل الجهات بسطر واحد
بواسطة الخاصة margin يمكنك تحديد حجم الهامش الخارجي من كل الجوانب. و هنا نود الإشارة إلى أنه على حسب عدد القيم التي تمررها لهذه الخاصية فإنه سيتم تحديد أي جهة سيتم إضافة الهامش فيها و هذا الأمر ستراه بدقة في الأمثلة التالية.
في المثال التالي قمنا بإضافة هامش داخلي للعنصر بمقدار 30 بكسل من كل الجوانب.
إذا قمت بتمرير قيمتين للخاصية margin سيحدث التالي:
- القيمة الأولى ستمثل حجم الهامش الخارجي جهتي الأعلى و الأسفل.
- القيمة الثانية ستمثل حجم الهامش الخارجي جهتي اليمين و اليسار.
إذا قمت بتمرير ثلاث قيم للخاصية margin سيحدث التالي:
- القيمة الأولى ستمثل حجم الهامش الخارجي في الأعلى.
- القيمة الثانية ستمثل حجم الهامش الخارجي جهتي اليمين و اليسار.
- القيمة الثالثة ستمثل حجم الهامش الخارجي في الأسفل.
إذا قمت بتمرير أربع قيم للخاصية margin سيحدث التالي:
- القيمة الأولى ستمثل حجم الهامش الخارجي في الأعلى.
- القيمة الثانية ستمثل حجم الهامش الخارجي جهة اليمين.
- القيمة الثالثة ستمثل حجم الهامش الخارجي في الأسفل.
- القيمة الرابعة ستمثل حجم الهامش الخارجي جهة اليسار.
إزالة الهامش الخارجي للعنصر
إذا أردت إزالة الهامش للعنصر من جهة محددة، يمكنك وضع قيمة الهامش الخاصة به تساوي 0.
في المثال التالي قمنا بإزالة الهامش الخارجي الإفتراضي للعنصر <p>من كل الجهات، و هذا يعني أنه في حال وضع إثنين وراء بعض سيظهران ملتصقان ببعضهما.
في المثال التالي قمنا بإضافة هامش خارجي في أعلى و أسفل العنصر الذي يملك الكلاس demo بمقدار 20 بيكسل و قمنا بإزالة أي هامش من الجانبين الأيمن و الأيسر.
إذا جعلت قيمة الهامش الخارجي تساوي 0 أو 0% أو 0px إلخ.. فكلها تعني صفر و هنا يفهم المتصفح أنك لا تريد عرض أي هامش.
مفهوم دمج الهوامش الخارجية للعناصر
الهامش الخارجي للعنصر فكرته أن يكون العنصر بعيد عن العنصر الآخر بالمقدار الذي تم وضعه.
الهوامش الخارجية الموجودة بين العناصر من جهة الأعلى و الأسفل يقوم المتصفح بدمج بشكل تلقائي لكي يجعل طول الصفحة أقل و هذا الأمر يسمى Margin Collapse.
في المثال التالي سيتم العنصر الأعلى يملك هامش خارجي من الأسفل بمقدار 30 بكسل و العنصر الأسفل يملك هامش خارجي من الأعلى بمقدار 30 بكسل الأمر الذي جعل المتصفح يقوم بدمج هذا الهامش كهامش واحد بمقدار 30 بكسل لأن هذه المسافة القصوى التي يتطلبها إبعاد العنصرين عن بعضمها.
مثال
توسيط العناصر بواسطة الهامش الخارجي
توسيط العنصر سواء بالنسبة للصفحة أو بالنسبة للعنصر الخارجي الموضوع فيه ممكن في حال كان للعنصر طول و عرض محدد.
توسيط العنصر أفقياً
في المثال التالي قمنا بتحديد عرض العنصر بواسطة الخاصية width و من بعدها أضفنا له الخاصية margin:auto; لكي يظهر في وسط الصفحة أفقياً.
توسيط العنصر أفقياً و عمودياً
في المثال التالي قمنا بجعل العنصر <body> يتمدد على كامل حجم الصفحة بواسطة أسلوب العرض Flex و من ثم أضفنا للوسم <div> الخاصية margin:auto; لكي يظهر في وسط الصفحة تماماً أفقياً و عمودياً.
مثال
في المثال السابق كان بإمكانك كتابة display: grid; بدل display: flex; و الحصول على ذات النتيجة.
عرض محتوى الصفحة بأسلوب Flex و Grid أمر مهم جداً و سنشرحه لك بالتفصيل في دروس لاحقة لذا لا تشغل بالك بالكود الذي كتبناه بآخر مثال، يكفي أن تعرف أنه يوجد حيل كثيرة في CSS تسمح لك بعرض المحتوى بالشكل الذي تريده.
