مفهوم الهامش الخارجي
الهامش الخارجي ( Margin ) هو المسافة الفارغة التي يمكن وضعها حول العنصر من الخارج لتحديد بعده عن العناصر الأخرى الموضوعة في الصفحة.
حجم الهامش الخارجي للعنصر يمكنك تحديده من كل الجهات أو من جهات محددة.
الهامش الخارجي ( Margin ) هو المسافة الفارغة التي يمكن وضعها حول العنصر من الخارج لتحديد بعده عن العناصر الأخرى الموضوعة في الصفحة.
حجم الهامش الخارجي للعنصر يمكنك تحديده من كل الجهات أو من جهات محددة.
تذكر دائماً أن الهامش الداخلي يكون بين المحتوى و الحدود التي يمكن إضافتها للعنصر أما الهامشر الخارجي فيكون خارج حدود العنصر.
الصورة التالية توضّح مكان الهامش الداخلي ( 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 بكسل.
بواسطة الخاصة 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;
لكي يظهر في وسط الصفحة تماماً أفقياً و عمودياً.
body { display: flex; min-height: 100vh; align-items: center; } div { margin: auto; }تجربة الكود
في المثال السابق كان بإمكانك كتابة display: grid;
بدل display: flex;
و الحصول على ذات النتيجة.
عرض محتوى الصفحة بأسلوب Flex و Grid أمر مهم جداً و سنشرحه لك بالتفصيل في دروس لاحقة لذا لا تشغل بالك بالكود الذي كتبناه بآخر مثال، يكفي أن تعرف أنه يوجد حيل كثيرة في CSS تسمح لك بعرض المحتوى بالشكل الذي تريده.