תיעוד CSS עם דוגמאות להרצה: Margin מול Padding

Q: האם padding או margin מגדילים את האלמנט?

Padding כן, תחת ברירת המחדל box-sizing: content-box: הוא מתווסף לרוחב ולגובה. Margin אף פעם לא מתווסף לגודל האלמנט; הוא מוסיף מרווח סביבו (בלוק עם width: auto אפילו נעשה צר יותר, כי ה-margins שלו לוקחים חלק מהרוחב הזמין). עם box-sizing: border-box, ה-padding נלקח מתוך הרוחב במקום.

Margin מול Padding ב-CSS: ההבדל, זה לצד זה

Padding הוא מרווח בתוך הגבול של אלמנט; margin הוא מרווח מחוץ לו. ראו את שניהם על אותה קופסה, זה לצד זה ובזמן אמת, ואז למדו במה להשתמש לרקעים, לאזורי לחיצה, למרווח בין אלמנטים ולמרכוז.

בדף הזה יש עורכים שאפשר להריץ - לערוך, להריץ ולראות את הפלט מיד.

מאת Kevin Spektor, מייסד שותף ו-CTO

פורסם ב-Sep 24, 2026

ההבדל בתמונה אחת

Padding נמצא בתוך הגבול. Margin נמצא מחוץ לו. לשתי הקופסאות למטה יש אותו תוכן ואותו ערך של 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>

עם padding, ה-24px כחולים: הם חלק מהקופסה, בתוך הגבול, והקופסה גדלה. עם margin, ה-24px אפורים: הקופסה נשארת צמודה לטקסט שלה והמרווח שבחוץ דוחף את קצוות המיכל.

נסו את שניהם על קופסה אחת

הזיזו את שני המחוונים. padding מגדיל את הקופסה הכחולה; margin מרחיק את הקופסה מהקצוות האפורים בלי לשנות אותה.

<!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>

שימו לב לשורת הגודל: היא משתנה כשמזיזים את מחוון ה-padding ונשארת אותו דבר כשמזיזים את מחוון ה-margin.

Margin מול padding במבט אחד

	Padding	Margin
איפה	בתוך הגבול	מחוץ לגבול
רקע	מציג את הרקע של האלמנט	תמיד שקוף
חלק מאזור הלחיצה	כן	לא
מוסיף לגודל האלמנט	כן, תחת `content-box`	לא
יכול להיות `auto`	לא	כן (`margin: 0 auto` ממרכז)
יכול להיות שלילי	לא	כן
ערכים אנכיים מתמזגים	אף פעם	כן, margins אנכיים סמוכים מתמזגים
אחוזים ביחס ל	רוחב הבלוק המכיל	רוחב הבלוק המכיל
שימוש נפוץ	מרווח בתוך כפתורים, כרטיסים, שדות קלט	מרווח בין אלמנטים, מרכוז

לכל מאפיין יש דף משלו עם כל הפרטים: CSS padding ו-CSS margin.

במה להשתמש

שאלו שאלה אחת: האם המרווח שייך לאלמנט, או יושב בין אלמנטים?

מקום סביב התווית של כפתור, החלק הפנימי של כרטיס, מרווח בין הטקסט של שדה קלט לגבול שלו: padding. הוא מקבל את הרקע ומגדיל את המטרה.
מרווח בין שתי פסקאות, בין כרטיסים, סביב מקטע: margin, או gap כשההורה הוא מיכל flex או grid.

אזור הלחיצה הוא המקום שבו הבחירה הכי חשובה. שני הקישורים למטה תופסים אותו מקום בדף, אבל המרווח של הראשון הוא padding ושל השני הוא margin. רק על הראשון קל ללחוץ:

<!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 סביב הקישור השני הוא מקום ריק שלא עושה כלום.

מרווח בין פריטים: margin או gap

לשורה או לרשת של פריטים, gap על ההורה מסוג flex או grid נקי יותר בדרך כלל מ-margins על כל ילד: הוא נכנס רק בין הפריטים, אף פעם לא לפני הראשון או אחרי האחרון, כך שאין מה לבטל.

<!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>

כאן המיכל האפור משתמש ב-padding (מרווח בתוכו, אפור), הפריטים משתמשים ב-padding (מרווח בתוך כל אחד, ירוק), ו-gap מטפל במרווח ביניהם.

טעויות נפוצות

שימוש ב-margin למרווח שצריך להיות צבוע. margin שקוף. אם המרווח צריך להציג את הרקע, זה padding.
שימוש ב-margin כדי להגדיל קישור. אזור הלחיצה נגמר בגבול; השתמשו ב-padding.
לצפות ששני margins אנכיים של 20px ייצרו 40px. margins אנכיים סמוכים מתמזגים ל-20px. padding אף פעם לא מתמזג.
לנסות padding: auto כדי למרכז. רק margin מקבל auto.
לשכוח ש-padding מגדיל את הקופסה. הוסיפו box-sizing: border-box כדי ש-width יכלול אותו.

שאלות נפוצות

מה ההבדל בין margin ל-padding?

Padding הוא המרווח בין התוכן של אלמנט לגבול שלו, בתוך האלמנט. Margin הוא המרווח מחוץ לגבול, בין האלמנט לשכנים שלו. Padding מציג את הרקע של האלמנט; margin תמיד שקוף.

מתי להשתמש ב-padding ולא ב-margin?

השתמשו ב-padding למרווח ששייך לאלמנט: מקום סביב הטקסט של כפתור, החלק הפנימי של כרטיס, כל דבר שצריך לחלוק את הרקע או להיות לחיץ. השתמשו ב-margin (או ב-gap ב-flex וב-grid) למרווח בין אלמנטים נפרדים.

האם padding או margin מגדילים את האלמנט?

Padding כן, תחת ברירת המחדל box-sizing: content-box: הוא מתווסף לרוחב ולגובה. Margin אף פעם לא מתווסף לגודל האלמנט; הוא מוסיף מרווח סביבו (בלוק עם width: auto אפילו נעשה צר יותר, כי ה-margins שלו לוקחים חלק מהרוחב הזמין). עם box-sizing: border-box, ה-padding נלקח מתוך הרוחב במקום.

האם padding יכול להיות שלילי כמו margin?

לא. padding שלילי לא תקין ונזנח, בעוד ש-margin שלילי מותר ויכול לגרום לאלמנטים לחפוף. padding גם לא יכול להיות auto, ולכן מרכוז משתמש ב-margin: 0 auto.

מושגים קשורים