الهوامش (Margins)

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 35 من 76.

في CSS، يُعد margin هو المساحة الموجودة حول العنصر، خارج أي حدود محددة. وهو جزء أساسي آخر من نموذج الصندوق (box model). تُستخدم الهوامش (Margins) لإنشاء مساحة بين العناصر، مما يفصلها عن بعضها البعض.

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

إليك الصيغة الأساسية لاستخدام خاصية margin:

selector {
    margin-top: value;
    margin-right: value;
    margin-bottom: value;
    margin-left: value;
}

margin-top: الهامش في الجانب العلوي من العنصر.
margin-right: الهامش في الجانب الأيمن من العنصر.
margin-bottom: الهامش في الجانب السفلي من العنصر.

margin-left: الهامش على الجانب الأيسر من العنصر.
value: قيمة الهامش المطلوبة، والتي يمكن تحديدها بالبكسل (px)، أو ems (em)، أو النسب المئوية (%)، أو وحدات CSS صالحة أخرى.

يمكنك أيضاً استخدام تدوين الاختصار لتعيين الهامش لجميع الجوانب الأربعة في وقت واحد، على سبيل المثال:

p {
    margin: 20px; /* يطبق نفس الهامش على جميع الجوانب الأربعة */
}

div {
    margin: 10px 25px; /* يضبط الهامش العلوي والسفلي على 10 بكسل، والهامش الأيسر والأيمن على 25 بكسل */
}

.button {
    margin: 15px 30px 10px 5px;/* يضبط الهامش لكل جانب بشكل فردي */
}

في هذا المثال، جميع عناصر <p> لها هامش قدره 20px من جميع الجوانب، وجميع عناصر <div> لها هامش علوي وسفلي قدره 10px وهامش أيسر وأيمن قدره 25px، وجميع العناصر التي تحمل الفئة button لها هامش علوي قدره 15px، وهامش أيمن قدره 30px، وهامش سفلي قدره 10px، وهامش أيسر قدره 5px.

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على عنوان (<h1>) وقسم (<div>). مهمتك هي استخدام خاصية margin لإضافة مساحة حول هذه العناصر. اتبع الخطوات أدناه:

اكتب قاعدة CSS تستهدف عنصر <h1>. قم بتعيين margin إلى 20px من جميع الجوانب.
اكتب قاعدة CSS تستهدف عنصر <div>. قم بتعيين margin العلوي والسفلي إلى 10px والـ margin الأيسر والأيمن إلى 30px.

ورقة مرجعية

تنشئ خاصية margin مساحة حول العنصر، خارج أي حدود. يمكنك التحكم في الهامش في جميع الجوانب الأربعة بشكل مستقل أو استخدام تدوين الاختصار.

خصائص الهامش الفردية:

selector {
    margin-top: value;
    margin-right: value;
    margin-bottom: value;
    margin-left: value;
}

تدوين الاختصار:

/* نفس الهامش من جميع الجوانب */
margin: 20px;

/* الأعلى/الأسفل: 10px، اليسار/اليمين: 25px */
margin: 10px 25px;

/* الأعلى: 15px، اليمين: 30px، الأسفل: 10px، اليسار: 5px */
margin: 15px 30px 10px 5px;

جرّب بنفسك

<html>
<head>
    <title>Margins</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">Mastering CSS Margins</h1>
    <div style="border:2px solid black;">Margins create space around elements.</div>
</body>
</html>