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

Naif Alghamdi3 · 21 مايو 2016

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

بهذا الشكل

margin: 0;

هشام رزق الله · 22 مايو 2016

بتاريخ 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.

هشام رزق الله · 21 مايو 2016

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

687474703a2f2f7777772e77337363686f6f6c732e636f6d2f6373732f626f782d6d6f64656c2e676966.gif

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

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

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

Naif Alghamdi3 · 21 مايو 2016

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

خصائص 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>

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

مصطفى صلاح3 · 25 مايو 2016

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

margin: 0;

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

ul {
    margin: 0;
}

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

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

تم التعديل في 25 مايو 2016 بواسطة mustafa salah

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

السؤال

Naif Alghamdi3

4 أجوبة على هذا السؤال

Recommended Posts

هشام رزق الله

هشام رزق الله

Naif Alghamdi3

مصطفى صلاح3

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية