الخاصية Margin في لغة CSS
تسمح لنا خصائص margin في لغة CSS بتحديد التباعد حول حدود صندوق العنصر (أو حافة مربع العنصر ، إذا لم يكن لها حدود محددة).
لا يتأثر هامش العنصر بلون الخلفية ، فهو دائمًا شفاف. ومع ذلك ، إذا كان العنصر الأب له لون خلفية ، فستكون مرئية من خلال منطقة الهامش للعنصر.
تحديد الهامش لكل جانب css
يمكننا تحديد الهوامش لكل جانب لعنصر ما مثل الجوانب العلوية واليمنى والسفلية واليسرى باستخدام margin-top و margin-right و margin-bottom و margin-left على التوالي. لنجرب المثال التالي لفهم كيفية عملها:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>تحديد الهامش لكل جانب</title>
<style>
body{
direction: rtl;
text-align: right;
}
h1 {
margin-top: 50px;
margin-bottom: 100px;
background: yellow;
}
p {
margin-left: 75px;
margin-right: 75px;
background: yellow;
}
</style>
</head>
<body>
<h1>هذا عنوان H1</h1>
<p>هذه فقرة من نص</p>
<p><strong>ملاحظة:</strong>قم بتغيّر قيم خصائص الهامش margin لترى كيف تعمل.</p>
</body>
</html>
المخرجات
يمكن تحديد قيم خصائص margin باستخدام القيم التالية:
- الطول - بإستخدام احدى وحدات القياس التالية
px،em،rem،pt،cm، إلخ. - النسبة المئوية - يمكن تحديد قيم خصائص
marginبالنسبة المئوية٪بالنسبة لمحتوى العنصر. auto- متصفح الويب يحسب هامشًا مناسبًا للاستخدام.inherit- تحدد أن قيم خصائصmarginيجب أن تورث من العنصر الأب.
يمكننا أيضًا تحديد هوامش سالبة على عنصر ما ، على سبيل المثال ، margin: -10px; أو margin: -5%; .... إلخ.
الخاصية المختصرة margin
الخاصية margin هي خاصية مختصرة لتجنب تحديد الهامش لكل جانب على حدة ، أي margin-top و margin-right و margin-bottom و margin-left.
دعنا نلقي نظرة على المثال التالي لفهم كيفية عملها:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>تحديد الهوامش لجميع الجوانب دفعة واحدة</title>
<style>
body{
direction: rtl;
text-align: right;
}
h1 {
margin: 50px;
}
p {
margin: 25px 75px;
}
div {
margin: 25px 50px 75px;
}
hr {
margin: 25px 50px 75px 100px;
}
h1, p, div {
background: #e0e0eb;
}
</style>
</head>
<body>
<h1>هذا عنوان H1</h1>
<p>هذه فقرة من نص</p>
<div>هذا عنصر DIV</div>
<hr>
<p><strong>ملاحظة:</strong>قم بتعديل قيم خصائص الهامش margin لترى كيف تعمل.</p>
</body>
</html>
المخرجات
يمكن للخاصية المختصرة margin ان تأخد قيمة واحدة أو اثنتين أو ثلاثة أو أربعة مفصولة بمسافات.
- إذا تم تحديد قيمة واحدة: فسيتم تطبيقها على الجوانب الأربعة.
- إذا تم تحديد قيمتين : يتم تطبيق القيمة الأولى على الجانب العلوي والسفلي ، ويتم تطبيق القيمة الثانية على الجانب الأيمن والأيسر من صندوق العنصر.
- إذا تم تحديد ثلاث قيم : يتم تطبيق القيمة الأولى على الجانب العلوي ، ويتم تطبيق القيمة الثانية على الجانب الأيمن والأيسر ، ويتم تطبيق القيمة الأخيرة على الجانب السفلي.
- إذا تم تحديد أربع قيم: فسيتم تطبيقها على الجوانب العلوي و الأيمن و السفلي والأيسر من صندوق العنصر على التوالي بالترتيب المحدد.
يوصى باستخدام الخاصية المختصرة margin ، مما يؤدي إلى توفير بعض الوقت عن طريق تجنب الكتابة الإضافية وتسهيل مراجعة وصيانة كود CSS.
توسيط العنصر افقياً بإستخدام القيمة Auto
تخبر القيمة auto للخاصية margin متصفح الويب بحساب الهامش تلقائيًا. تستخدم عادةً لتوسيط عنصر أفقيًا داخل صندوق عنصر أكبر.
لنجرب المثال التالي لفهم كيفية عملها:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>Centering an Element with CSS Auto Margin</title>
<style>
body{
direction: rtl;
text-align: center;
}
.container {
width: 300px;
height: 200px;
background: #ddd;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<h1>هذه عنوان H1</h1>
<p>هذه فقرة من نص</p>
</div>
</body>
</html>
المخرجات
تسمح قواعد النمط أعلاه لعنصر <div> بأخذ 300 بكسل من كل المساحة الأفقية المتاحة ، وسيتم تقسيم المساحة المتبقية بالتساوي بين الهوامش اليمنى واليسرى.