ماهي الهوامش الخارجية في لغة CSS؟

خاصية margin هي خاصية تستخدم في لغة CSS لتحديد المسافة بين عناصر HTML المختلفة. يمكن استخدام هذه الخاصية لتحديد المسافة بين الحدود الخارجية لعنصر HTML والحدود الخارجية للعناصر المجاورة له.

القيم المقبولة لخاصية margin:

القيمة الأولى هي القيمة الرقمية بالبكسل أو بالنسبة المئوية التي تحدد الهامش العلوي top margin.

القيمة الثانية هي القيمة الرقمية بالبكسل أو بالنسبة المئوية التي تحدد الهامش الأيسر left margin.

القيمة الثالثة هي القيمة الرقمية بالبكسل أو بالنسبة المئوية التي تحدد الهامش السفلي bottom margin.

القيمة الرابعة هي القيمة الرقمية بالبكسل أو بالنسبة المئوية التي تحدد الهامش الأيمن right margin.

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

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

CSS

div {
    margin: 10px 20px 30px 40px;
}

في هذا المثال، تم تحديد الهامش العلوي بقيمة 10 بكسل، الهامش الأيسر بقيمة 20 بكسل، الهامش السفلي بقيمة 30 بكسل، والهامش الأيمن بقيمة 40 بكسل.
يمكن استخدام القيم السالبة لتحديد العناصر المتداخلة بشكل أفضل، ويمكن استخدام النسبة المئوية لتحديد الهامش بنسبة من عرض العنصر الأصلي، على سبيل المثال:

CSS

div {
    margin: 10% 5% 20% 15%;
}

في هذا المثال، تم تحديد الهامش العلوي بنسبة 10٪ من عرض العنصر الأصلي، الهامش الأيسر بنسبة 5٪، الهامش السفلي بنسبة 20٪، والهامش الأيمن بنسبة 15٪.

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

CSS

div {
    margin-top: 20px;
    margin-bottom: 30px;
}

في هذا المثال، تم تحديد الهامش العلوي بقيمة 20 بكسل والهامش السفلي بقيمة 30 بكسل.

بالإضافة إلى ذلك، يمكن استخدام القيمة الخاصة "auto" للسماح للمتصفح بتحديد الهامش بشكل تلقائي، على سبيل المثال:

CSS

div {
    margin-left: auto;
    margin-right: auto;
}

في هذا المثال، تم تحديد الهامش الأيسر والأيمن بالقيمة auto، مما يعني أن المتصفح سيقوم بتحديد الهامش بشكل تلقائي ليتم توسيط العنصر بشكل صحيح.

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

وهكذا إنتهينا من درسنا أو مقالتنا المتواضعة أتمنى أنك فهمت و وفقك الله أتمنى دعمنا بمشاركة الدرس لكي تعم الفائدة.