9- كورس CSS للمبتدئين – CSS: الهوامش Margin

ما هي الهوامش في CSS؟

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

طرق تحديد الهوامش في CSS

يمكنك تحديد الهوامش باستخدام وحدات القياس المختلفة مثل البيكسل (px) أو النسبة المئوية (%) أو حتى الوحدات النسبية مثل em. تسمح لك هذه المرونة بتخصيص التصميم وفقًا لاحتياجاتك. إليك بعض الأمثلة على كيفية استخدام الهوامش:

.element {
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 10px;
    margin-left: 15px;
}

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

.element {
    margin: 10px 15px 10px 15px;
}

تحديد الهوامش بشكل تلقائي

يمكنك تعيين قيم الهوامش لتكون تلقائية باستخدام الكلمة المفتاحية auto. غالبًا ما يُستخدم هذا لتمركز العناصر أفقياً داخل حاوياتها. عندما تحدد الهوامش الأفقية على أنها auto، يقوم المتصفح بحساب المسافة المناسبة تلقائيًا لتوسيط العنصر.

.container {
    width: 80%;
    margin: 0 auto;
}

في هذا المثال، يتم توسيط العنصر داخل الحاوية بنسبة عرض 80%، بينما تتوزع المسافة المتبقية بشكل متساوٍ على كلا الجانبين بفضل استخدام margin: 0 auto;.