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

Q: هل يزيد padding أم margin حجم العنصر؟

الحشو يزيده، مع القيمة الافتراضية box-sizing: content-box: يُضاف إلى العرض والارتفاع. أما الهامش فلا يُضاف أبدًا إلى حجم العنصر؛ بل يضيف مسافة حوله (والعنصر الكتلي الذي عرضه width: auto يصبح أضيق، لأن هوامشه تأخذ جزءًا من العرض المتاح). ومع box-sizing: border-box يُقتطع الحشو من داخل العرض بدلًا من ذلك.

الفرق في صورة واحدة

الحشو داخل الحد. الهامش خارجه. للصندوقين أدناه المحتوى نفسه والقيمة نفسها 24px؛ الخاصية وحدها تختلف. الرمادي هو الحاوية التي خلفهما.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin vs padding</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; }
    .box {
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
    .with-padding { padding: 24px; }
    .with-margin { margin: 24px; }
    .label { font-size: 13px; margin: 6px 0 0; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div>
      <div class="container"><div class="box with-padding">Text</div></div>
      <p class="label">padding: 24px</p>
    </div>
    <div>
      <div class="container"><div class="box with-margin">Text</div></div>
      <p class="label">margin: 24px</p>
    </div>
  </div>
</body>
</html>

مع الحشو تكون الـ 24px زرقاء: فهي جزء من الصندوق، داخل الحد، والصندوق يكبر. ومع الهامش تكون الـ 24px رمادية: يبقى الصندوق ملتصقًا بنصه والمسافة الخارجية تدفع حواف الحاوية بعيدًا.

جرّب الاثنين على صندوق واحد

حرّك المنزلقين. الحشو يكبّر الصندوق الأزرق؛ والهامش يبعد الصندوق عن الحواف الرمادية من دون أن يغيّره.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sliders</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 6px; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; margin-top: 10px; }
    #box { border: 3px solid #111827; background: #2563eb; color: white; }
  </style>
</head>
<body>
  <label>padding <input id="p" type="range" min="0" max="40" value="10"> <span id="pv"></span></label>
  <label>margin <input id="m" type="range" min="0" max="40" value="10"> <span id="mv"></span></label>
  <div class="container"><div id="box">Box</div></div>
  <p id="size"></p>
  <script>
    const box = document.getElementById('box');
    const p = document.getElementById('p');
    const m = document.getElementById('m');
    const update = () => {
      box.style.padding = p.value + 'px';
      box.style.margin = m.value + 'px';
      document.getElementById('pv').textContent = p.value + 'px';
      document.getElementById('mv').textContent = m.value + 'px';
      const r = box.getBoundingClientRect();
      document.getElementById('size').textContent =
        'Blue box: ' + Math.round(r.width) + ' x ' + Math.round(r.height) + 'px';
    };
    p.addEventListener('input', update);
    m.addEventListener('input', update);
    update();
  </script>
</body>
</html>

راقب سطر الحجم: يتغير حين تحرك منزلق الحشو ويبقى كما هو حين تحرك منزلق الهامش.

margin وpadding بنظرة سريعة

	الحشو padding	الهامش margin
المكان	داخل الحد	خارج الحد
الخلفية	تظهر فيه خلفية العنصر	شفاف دائمًا
جزء من مساحة النقر	نعم	لا
يضيف إلى حجم العنصر	نعم، مع `content-box`	لا
يمكن أن يكون `auto`	لا	نعم (`margin: 0 auto` يوسّط)
يمكن أن يكون سالبًا	لا	نعم
انهيار القيم العمودية	أبدًا	نعم، الهوامش العمودية المتجاورة تنهار
النسب المئوية نسبةً إلى	عرض الكتلة الحاوية	عرض الكتلة الحاوية
الاستخدام المعتاد	المسافة داخل الأزرار والبطاقات وحقول الإدخال	المسافة بين العناصر، والتوسيط

لكل خاصية صفحتها بكل التفاصيل: padding في CSS وmargin في CSS.

أيهما تستخدم

اسأل سؤالًا واحدًا: هل المسافة تخص العنصر، أم تقع بين العناصر؟

المساحة حول تسمية الزر، وداخل البطاقة، والمسافة بين نص حقل الإدخال وحده: الحشو. يأخذ الخلفية ويكبّر الهدف.
المسافة بين فقرتين، وبين البطاقات، وحول قسم: الهامش، أو gap حين يكون الأب حاوية flex أو grid.

مساحة النقر هي حيث يهم الاختيار أكثر. الرابطان أدناه يشغلان المساحة نفسها في الصفحة، لكن مسافة الأول حشو ومسافة الثاني هامش. الأول وحده سهل الإصابة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click area</title>
  <style>
    a {
      display: inline-block;
      background: #2563eb;
      color: white;
      text-decoration: none;
      outline: 2px dashed #f59e0b; /* the clickable area */
    }
    .pad { padding: 14px 24px; }
    .mar { margin: 14px 24px; }
  </style>
</head>
<body>
  <a class="pad" href="#">Padding: big target</a>
  <a class="mar" href="#">Margin: tiny target</a>
</body>
</html>

الإطار الكهرماني المتقطع هو حافة العنصر، وهي المنطقة التي تستجيب للنقرات واللمسات. الهامش حول الرابط الثاني مساحة فارغة لا تفعل شيئًا.

المسافة بين العناصر: margin أم gap

لصف أو شبكة من العناصر، تكون gap على أب flex أو grid عادةً أنظف من الهوامش على كل ابن: فهي تقع بين العناصر فقط، لا قبل الأول ولا بعد الأخير، فلا يوجد ما تحتاج إلى إلغائه.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>gap</title>
  <style>
    .list { display: flex; gap: 12px; background: #e5e7eb; padding: 12px; }
    .item { background: #16a34a; color: white; padding: 12px 16px; }
  </style>
</head>
<body>
  <div class="list">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
  </div>
</body>
</html>

هنا تستخدم الحاوية الرمادية الحشو (مسافة داخلها، رمادية)، والعناصر تستخدم الحشو (مسافة داخل كل منها، خضراء)، وgap تتولى المسافة بينها.

أخطاء شائعة

استخدام الهامش لمسافة يجب أن تكون ملونة. الهامش شفاف. إن كانت المسافة يجب أن تُظهر الخلفية فهي حشو.
استخدام الهامش لتكبير رابط. مساحة النقر تنتهي عند الحد؛ استخدم الحشو.
توقع أن يصنع هامشان عموديان بـ 20px مسافة 40px. الهوامش العمودية المتجاورة تنهار إلى 20px. الحشو لا ينهار أبدًا.
محاولة padding: auto للتوسيط. الهامش وحده يقبل auto.
نسيان أن الحشو يكبّر الصندوق. أضف box-sizing: border-box كي تشمله width.

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

ما الفرق بين margin وpadding؟

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

متى أستخدم padding بدل margin؟

استخدم الحشو للمسافة التي تخص العنصر: المساحة حول نص الزر، وداخل البطاقة، وكل ما يجب أن يشارك الخلفية أو يكون قابلًا للنقر. واستخدم الهامش (أو gap في flex وgrid) للمسافة بين العناصر المنفصلة.

هل يزيد padding أم margin حجم العنصر؟

الحشو يزيده، مع القيمة الافتراضية box-sizing: content-box: يُضاف إلى العرض والارتفاع. أما الهامش فلا يُضاف أبدًا إلى حجم العنصر؛ بل يضيف مسافة حوله (والعنصر الكتلي الذي عرضه width: auto يصبح أضيق، لأن هوامشه تأخذ جزءًا من العرض المتاح). ومع box-sizing: border-box يُقتطع الحشو من داخل العرض بدلًا من ذلك.

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

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

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