• 0

ماذا يعني أن تكون قيمة margin صفر في الـ css ؟

كيف يؤثر margin اذا كان صفر ؟

بهذا الشكل

margin: 0;

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 1
بتاريخ 17 ساعات قال NaifAlghamdi:

قمت مرة بحذف المارجن ومرة قمت بوضع المارجن بصفر ولم يحدث اي تغير ؟ ما الفائدة اذاً من كتابة المارجن بصفر ؟ لأني رأيت بعض الدروس في اليوتيوب يقومون بوضع المارجن بصفر مع انها لافائدة منها 

لديها فائدة كما أخبرتك في وضع هامش، فمثلا أنظر لهذا المثال من موقع W3schools لو حولت جميع قيم margin إلى 0 ووضعت margin: 0px; إلى p ستجد أن العناصر أصبحت متلاصقة.

عدّل الشيفرة البرمجية في المثال السابق لتصبح كما في المثال التالي لترى الفرق:

<!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: yellow;
    margin: 0px;
}

p.ex {
    border:1px solid red;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 0px;
}
</style>
</head>
<body>

<h2>Using Individual margin Properties:</h2>

<p>This is a paragraph with no specified margins.</p>
<p class="ex">This paragraph has a top and bottom margin of 100px, a left margin of 80px, and a right margin of 150px.</p>

</body>
</html>

أرجو أن أكون قد وفقت في توضيح الفرق بين المثال السابق وهذا المثال.

للمزيد من المعلومات حول margin أنصحك بالإطلاع على دروس w3schools.

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 1

يعني أنه لا يوجد هامش (مسافة) بين هذه الكتلة مع بقية الكتلة، فـ margin تحدد مسافة الهامش بين هذه الكتلة وبقية الكتل، ولمعرفة ترتيب الحدود الخارجية بين margin وborder وpadding والمحتوى يمكنك الإطلاع على هذه الصورة:

687474703a2f2f7777772e77337363686f6f6c732e636f6d2f6373732f626f782d6d6f64656c2e676966.gif

خصائص margin كالتالي حيث ستختار الهامش لكل من الجهة العلوية واليمنى والسفلى واليسرى على التوالي كما في المثال التالي:

 p {
    margin: 100px 150px 100px 80px;
}

للمزيد من المعلومات حول margin يمكنك الإطلاع على هذا الدرس.

2 اشخاص أعجبوا بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0
بتاريخ 10 ساعات قال هشام رزق الله:

يعني أنه لا يوجد هامش (مسافة) بين هذه الكتلة مع بقية الكتلة، فـ margin تحدد مسافة الهامش بين هذه الكتلة وبقية الكتل، ولمعرفة ترتيب الحدود الخارجية بين margin وborder وpadding والمحتوى يمكنك الإطلاع على هذه الصورة:

687474703a2f2f7777772e77337363686f6f6c732e636f6d2f6373732f626f782d6d6f64656c2e676966.gif

خصائص margin كالتالي حيث ستختار الهامش لكل من الجهة العلوية واليمنى والسفلى واليسرى على التوالي كما في المثال التالي:


 p {
    margin: 100px 150px 100px 80px;
}

للمزيد من المعلومات حول margin يمكنك الإطلاع على هذا الدرس.

 
 
 
 
 

انظر لهذا الكود 

<!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: yellow;
}

p.ex {
    border:1px solid red;
    margin: 0;
}
</style>
</head>
<body>

<h2>Using The margin Shorthand Property:</h2>

<p>This is a paragraph with no specified margins.</p>
<p class="ex">This paragraph has a top and bottom margin of 100px, a left margin of 80px, and a right margin of 150px.</p>

</body>
</html>

قمت مرة بحذف المارجن ومرة قمت بوضع المارجن بصفر ولم يحدث اي تغير ؟ ما الفائدة اذاً من كتابة المارجن بصفر ؟ لأني رأيت بعض الدروس في اليوتيوب يقومون بوضع المارجن بصفر مع انها لافائدة منها 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

أخي الفائدة من إستخدام

margin: 0;

هي أنه يكون لبعض العناصر هامش إفتراضي تم وضع من قبل المتصفح, مثلاً وسم <ul> لديه هامش إفتراضي و ليست قيمته 0 , فيمكنك إبطال إعدادات المتصفح الإفتراضية و جعل الهامش الخاص به صفر بإستخدام :

ul {
    margin: 0;
}

فلذلك لن تلاحظة إختلاف في وضع قيمة الهامش صفر و عدم وضعها من الأساس إلا في العناصر التى تأخذ قيمة هامش إفتراضية من المتصفح, جرب تعمل قيمة الهامش لكل من ul و li و body و سوف تلاحظ فرق, أما إذا غيرت قيمة الهامش لـdiv او اي عنصر قيمة الهامش الإفتراضية لديه 0 أصلاً فلن تلاحظ فرق.

أتمنى ان تكون الفكرة وصلت و شكراً

تمّ تعديل بواسطة mustafa salah

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن