اذهب إلى المحتوى
  • 0

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

Naif Alghamdi

السؤال

Recommended Posts

  • 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

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

687474703a2f2f7777772e77337363686f6f6c732e636f6d2f6373732f626f782d6d6f64656c2e676966.gif

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 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
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...