تعلم CSS بالعربية 2023 _ #4 CSS Margin

CSS Margin ما هو ؟ وطرق الاستفادة

الـ CSS Margin يشير إلى المسافة بين العنصر والعناصر المجاورة له، وهي عبارة عن هوامش يمكن تعيينها لعنصر HTML من جميع الجوانب (الأعلى والأيمن والأسفل والأيسر). ويمكن استخدام الـ Margin لتحديد المسافة بين العناصر في صفحة الويب الخاصة بك.

يمكن تعيين الـ Margin باستخدام الخاصية CSS Margin يشير إلى المسافة بين العنصر والعناصر المجاورة له، وهي عبارة عن هوامش يمكن تعيينها لعنصر HTML من جميع الجوانب (الأعلى والأيمن والأسفل والأيسر). ويمكن استخدام الـ Margin لتحديد المسافة بين العناصر في صفحة الويب الخاصة بك.

ويمكن تحديد قيمة الـ Margin بوحدات مختلفة، مثل البيكسل (px) والنسبة (%) والمتر (em) والبوينت (pt) وغيرها.

على سبيل المثال، إذا كان لدينا عنصر div في صفحة الويب، وكنا نريد تحديد مسافة الـ Margin الخاصة به كالتالي:

في هذا المثال، تم تحديد مسافة الـ Margin الخاصة بالعنصر div بوحدة البكسل، وتم تعيين قيم مختلفة لكل جانب من جوانب العنصر. ويمكنك تغيير هذه القيم واختيار الوحدة التي تناسبك.

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

<div class="container">
   <div class="box1">...</div>
   <div class="box2">...</div>
</div>

.box1 {
   margin-right: 20px;
}

.box2 {
   margin-left: 20px;
}

في هذا المثال، تم تحديد مسافة الـ Margin بين عنصري الـ box1 والـ box2 في الـ container باستخدام الـ Margin الأيسر والأيمن. وبهذا، سيتم تحديد مسافة بين العنصرين وتحقيق الفراغ بينهما.

يمكن استخدام الـ Margin بشكل متكرر في صفحات الويب الخاصة بك لتحديد المسافات بين العناصر وتحسين تصميم الصفحة.

استخدام الـ CSS Margin لتحديد المسافة بين النصوص داخل عنصر واحد؟

يمكن استخدام الـ Margin بين النصوص داخل عنصر واحد، ولكن يجب أن يتم ذلك بشكل حذر، لأن استخدام الـ Margin بين النصوص قد يؤدي إلى تغيير طريقة عرض النصوص وإلى زيادة المساحة المستخدمة لعرض العنصر. علاوة على ذلك، قد لا يعمل ذلك بشكل جيد مع جميع أنواع النصوص والمتصفحات.

بدلاً من ذلك، يمكن استخدام الخاصية “padding” لتحديد المسافة بين النصوص داخل عنصر واحد. تعمل الـ Padding على إضافة مساحة داخل العنصر، ويتم تحديد قيم الـ Padding بنفس الطريقة التي تم تحديد قيم الـ Margin، باستخدام الوحدات المختلفة مثل البكسل والنسبة والمتر والبوينت وغيرها.

على سبيل المثال، يمكن تحديد مسافة الـ Padding بين النصوص داخل عنصر div كالتالي:

<div class="my-div">
   <p>نص 1</p>
   <p>نص 2</p>
</div>

.my-div {
   padding: 10px;
}

في هذا المثال، تم تحديد مسافة الـ Padding بوحدة البكسل لعنصر div، والتي ستضاف داخل العنصر وحول النصوص التي تم تضمينها فيه. وبهذا، سيتم تحديد مسافة بين النصوص داخل العنصر وتحسين عرض النصوص.

لذلك، يفضل استخدام الـ Padding بدلاً من الـ Margin لتحديد المسافة بين النصوص داخل عنصر واحد.

استخدام الـ CSS Marginلتحديد المسافة بين الصور والنصوص؟

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

على سبيل المثال، يمكن تحديد مسافة الـ Margin بين الصور والنصوص كالتالي:

<div class="container">
   <img src="image.jpg" alt="صورة">
   <p>هذا هو النص الخاص بالصورة</p>
</div>

.container {
   margin-top: 20px;
   margin-bottom: 20px;
}

img {
   margin-right: 10px;
}

p {
   margin-left: 10px;
}

في هذا المثال، تم تحديد مسافة الـ Margin بين الصورة والنص باستخدام الـ Margin العلوي والسفلي للـ container، والـ Margin الأيمن للصورة والـ Margin الأيسر للنص. وبهذا، سيتم تحديد مسافة بين الصورة والنص وتحقيق الفراغ بينهما.

يمكن استخدام الـ Margin بشكل متكرر في صفحات الويب الخاصة بك لتحديد المسافات بين العناصر وتحسين تصميم الصفحة.

استخدام الـ CSS Margin لتحديد المسافة بين العناصر الأخرى؟

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

على سبيل المثال، يمكن تحديد مسافة الـ Margin بين عنصرين div كالتالي:

<div class="div1"></div>
<div class="div2"></div>

.div1 {
   margin-bottom: 20px;
}

.div2 {
   margin-top: 20px;
}

في هذا المثال، تم تحديد مسافة الـ Margin بين العنصرين div باستخدام الـ Margin العلوي للـ div2 والـ Margin السفلي للـ div1. وبهذا، سيتم تحديد مسافة بين العنصرين div وتحقيق الفراغ بينهما.

يمكن استخدام الـ Margin بشكل متكرر في صفحات الويب الخاصة بك لتحديد المسافات بين العناصر وتحسين تصميم الصفحة.