وثائق CSS قابلة للتشغيل: margin في CSS

ما هو margin

الهامش margin هو المسافة خارج حد العنصر. شفاف دائمًا، ووظيفته دفع العناصر الأخرى بعيدًا. في المثال تظهر الحاوية الرمادية عبر الهامش المحيط بالصندوق الأزرق:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin</title>
  <style>
    .container {
      display: flow-root; /* keeps the child's margin inside the gray area */
      background: #e5e7eb;
    }
    .box {
      margin: 24px;
      padding: 12px;
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">24px of margin on every side (the gray)</div>
  </div>
</body>
</html>

الشريط الرمادي ليس جزءًا من الصندوق: خلفية الصندوق نفسها تتوقف عند حده. للمسافة التي تأخذ خلفية العنصر استخدم الحشو padding.

اختصار margin

تقبل margin من قيمة إلى أربع قيم، بترتيب عقارب الساعة نفسه الذي في padding:

التصريح	الأعلى	اليمين	الأسفل	اليسار
`margin: 10px;`	10	10	10	10
`margin: 10px 20px;`	10	20	10	20
`margin: 10px 20px 30px;`	10	20	30	20
`margin: 10px 20px 30px 40px;`	10	20	30	40

لكل جانب أيضًا خاصيته (margin-top وmargin-right وmargin-bottom وmargin-left) ونسخ منطقية تتبع اتجاه النص (margin-inline-start وmargin-inline-end وmargin-block وmargin-inline). في صفحة عربية تكون البداية start هي الجانب الأيمن.

على عكس padding، يقبل margin القيمة auto والقيم السالبة:

القيمة	مثال	ملاحظات
طول	`16px`، `1.5rem`	الأكثر شيوعًا
نسبة مئوية	`5%`	من عرض الكتلة الحاوية، للجوانب الأربعة
`auto`	`margin: 0 auto`	المتصفح يملأ المساحة المتبقية
سالبة	`margin-top: -10px`	تسحب العنصر أو جاره أقرب، وقد يحدث تداخل

التوسيط بـ margin: 0 auto

margin: 0 auto هي الطريقة الكلاسيكية لتوسيط عنصر كتلي أفقيًا. القيمة auto على الجانبين تخبر المتصفح بقسمة المساحة المتبقية بالتساوي. تحتاج إلى عرض أصغر من الحاوية، وإلا فلا يبقى شيء للقسمة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    .page {
      max-width: 300px;
      margin: 0 auto;
      background: #2563eb;
      color: white;
      padding: 12px;
    }
    .end {
      width: 160px;
      margin-left: auto; /* all the leftover space goes on the left */
      background: #16a34a;
      color: white;
      padding: 8px;
      margin-top: 12px;
    }
  </style>
</head>
<body>
  <div class="page">Centered with margin: 0 auto</div>
  <div class="end">Pushed to the end</div>
</body>
</html>

الهوامش auto لا توسّط عموديًا في التدفق العادي (الهوامش العمودية auto تصبح 0) ولا تفعل شيئًا على العناصر السطرية. لنظرة كاملة على التوسيط راجع كيفية توسيط div.

انهيار الهوامش

حين يتلامس هامشان عموديان لا يُجمعان. يحتفظ المتصفح بالأكبر منهما فقط. هنا للصندوق الأول margin-bottom: 30px وللثاني margin-top: 20px، والفجوة بينهما 30px لا 50px:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin collapsing</title>
  <style>
    .box { background: #2563eb; color: white; padding: 10px; }
    .a { margin-bottom: 30px; }
    .b { margin-top: 20px; }
  </style>
</head>
<body>
  <div class="box a">margin-bottom: 30px</div>
  <div class="box b">margin-top: 20px</div>
  <p id="gap"></p>
  <script>
    const a = document.querySelector('.a').getBoundingClientRect();
    const b = document.querySelector('.b').getBoundingClientRect();
    document.getElementById('gap').textContent = 'Gap: ' + (b.top - a.bottom) + 'px';
  </script>
</body>
</html>

الانهيار مقصود: يسمح للفقرات والعناوين بأن تحمل كل منها مسافتها من دون مضاعفتها حيث تلتقي. لكنه يفاجئ الناس في حالة ثانية، حين يفلت الهامش العلوي للابن من أبيه:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Parent collapse</title>
  <style>
    .parent { background: #e5e7eb; margin-bottom: 16px; }
    .child { margin-top: 30px; background: #f59e0b; padding: 8px; }
    .fixed { display: flow-root; }
  </style>
</head>
<body>
  <div class="parent"><div class="child">Margin escaped: no gray above me</div></div>
  <div class="parent fixed"><div class="child">flow-root: 30px of gray above me</div></div>
</body>
</html>

في الأب الأول انهار هامش الابن البالغ 30px عبر الحافة العلوية للأب، فدفع الأب كله إلى الأسفل بدل أن ينشئ مسافة رمادية داخله. أي من هذه يوقفه:

display: flow-root على الأب (على عكس overflow: hidden، لا يقص شيئًا).
حشو أو حد على الحافة العلوية للأب.
أب من نوع flex أو grid: هوامش عناصر flex وgrid لا تنهار أبدًا.

الهوامش الأفقية لا تنهار أبدًا، ولا هوامش العناصر العائمة أو ذات الموضع المطلق.

الهوامش السالبة

الهامش السالب يسحب في الاتجاه المعاكس. على الجانب العلوي أو جانب البداية يحرّك العنصر نفسه؛ وعلى الجانب السفلي أو جانب النهاية يسحب العنصر التالي أقرب. قد تتداخل الصناديق:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Negative margin</title>
  <style>
    .card { background: #e5e7eb; padding: 16px; width: 240px; }
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #2563eb;
      border: 4px solid white;
      margin-top: -46px; /* pulled up over the banner */
    }
    .banner { height: 60px; background: #16a34a; width: 272px; }
  </style>
</head>
<body>
  <div class="banner"></div>
  <div class="card">
    <div class="avatar"></div>
    <p>The avatar overlaps the banner.</p>
  </div>
</body>
</html>

margin auto في flexbox

داخل حاوية flex، يأخذ الهامش auto كل المساحة الحرة على جانبه. إنها أبسط طريقة لدفع عنصر واحد إلى الطرف البعيد من الصف، وفي flexbox تعمل auto عموديًا أيضًا:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flex margin auto</title>
  <style>
    nav { display: flex; gap: 12px; background: #111827; padding: 10px; }
    nav a { color: white; text-decoration: none; }
    .login { margin-inline-start: auto; color: #f59e0b; }
  </style>
</head>
<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">Docs</a>
    <a href="#">Blog</a>
    <a href="#" class="login">Log in</a>
  </nav>
</body>
</html>

تضع margin-inline-start: auto المساحة الحرة قبل «Log in»، فيقع في نهاية الصف سواء كانت الصفحة من اليسار إلى اليمين أو من اليمين إلى اليسار.

أخطاء شائعة

margin: 0 auto على عنصر بلا عرض. العنصر الكتلي يملأ حاويته أصلًا؛ اضبط width أو max-width.
margin: auto على عنصر سطري. الهوامش auto على span أو a أو img متروكة سطرية تساوي 0. اجعله display: block.
جمع هامشين عموديين وتوقع المجموع. ينهاران إلى الأكبر؛ استخدم gap في flex أو grid، أو اتجاهًا واحدًا للهوامش باستمرار.
هامش الابن يدفع أباه. هذا انهيار بين الأب والابن؛ أضف display: flow-root إلى الأب.
استخدام الهامش لمسافة يجب أن تكون لها خلفية. الهامش شفاف؛ استخدم الحشو.

الأسئلة الشائعة

ما هو margin في CSS؟

الهامش margin هو المسافة خارج حد العنصر. شفاف ويدفع العناصر المجاورة بعيدًا. يُضبط عبر margin أو خصائص الجانب الواحد margin-top وmargin-right وmargin-bottom وmargin-left.

ماذا يفعل margin: 0 auto؟

يضبط الهامشين العلوي والسفلي على 0 ويقسم المساحة الأفقية المتبقية بالتساوي بين الهامشين الأيسر والأيمن، فيتوسط العنصر الكتلي أفقيًا. يحتاج العنصر إلى عرض أصغر من حاويته، مثلًا max-width: 600px.

لماذا لا يوسّط margin auto العنصر عندي؟

عادةً لأن العنصر بلا عرض (العنصر الكتلي يملأ حاويته، فلا يبقى شيء للقسمة)، أو لأنه سطري (span وa وimg افتراضيًا)، والهوامش auto فيه تساوي 0. أعطه عرضًا وdisplay: block، أو وسّطه من الأب باستخدام flexbox أو grid.

ما هو انهيار الهوامش margin collapsing؟

حين يلتقي هامشان عموديان، مثل الهامش السفلي لفقرة والهامش العلوي للفقرة التالية، يستخدم المتصفح الأكبر منهما فقط بدل جمعهما. يحدث هذا للهوامش العمودية للصناديق الكتلية في التدفق العادي فقط، لا في تخطيطات flex أو grid.

هل يمكن أن يكون margin سالبًا؟

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

مفاهيم ذات صلة