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

Q: באיזה סדר נכתבים הערכים בקיצור padding?

עם כיוון השעון מלמעלה: padding: top right bottom left;. עם שלושה ערכים הסדר הוא למעלה, שמאל וימין, למטה; עם שני ערכים, למעלה ולמטה ואז שמאל וימין; עם ערך אחד, כל ארבעת הצדדים.

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

עם ברירת המחדל box-sizing: content-box, כן: ה-padding מתווסף ל-width ול-height. עם box-sizing: border-box, ה-padding נלקח מתוך הרוחב, כך שהאלמנט שומר על הגודל שהגדרתם.

Q: ביחס למה מחושב padding באחוזים?

ביחס לרוחב הבלוק המכיל, בכל ארבעת הצדדים. padding-top: 50% הוא חצי מהרוחב של ההורה, לא מהגובה שלו, ולכן טריקים ישנים של יחס גובה-רוחב השתמשו ב-padding אנכי.

Q: איך מוסיפים padding ב-HTML?

עם CSS, בגיליון סגנונות או במאפיין style: . ל-HTML אין מאפיין padding לאלמנטים רגילים; המאפיין הישן cellpadding של טבלאות מיושן והוחלף ב-padding על td ו-th.

מה זה padding

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding</title>
  <style>
    .box {
      padding: 24px;
      border: 3px solid #111827;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      width: max-content;
      margin-bottom: 12px;
    }
    .none { padding: 0; }
  </style>
</head>
<body>
  <div class="box none">padding: 0</div>
  <div class="box">padding: 24px (the green band)</div>
</body>
</html>

האזור הכחול הוא התוכן. הרצועה הירוקה סביבו היא 24px של padding בכל צד, והגבול יושב מחוץ לה.

הקיצור padding: 1, 2, 3 או 4 ערכים

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

הצהרה	למעלה	ימין	למטה	שמאל
`padding: 10px;`	10	10	10	10
`padding: 10px 20px;`	10	20	10	20
`padding: 10px 20px 30px;`	10	20	30	20
`padding: 10px 20px 30px 40px;`	10	20	30	40

שני ערכים פירושם "אנכי, אופקי". שלושה ערכים פירושם "למעלה, אופקי, למטה". ארבעה הולכים סביב השעון: למעלה, ימין, למטה, שמאל (טריק זיכרון נפוץ באנגלית הוא TRouBLe).

הקלידו כל קיצור למטה. הקופסה מצוירת מחדש והדפדפן מדווח מה כל צד קיבל:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding tester</title>
  <style>
    #box {
      width: max-content;
      padding: 10px 20px 30px 40px;
      border: 3px solid #111827;
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      margin-top: 10px;
    }
    code { font-size: 14px; }
  </style>
</head>
<body>
  <label>padding: <input id="val" value="10px 20px 30px 40px" size="24"></label>
  <div id="box">content</div>
  <p><code id="out"></code></p>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.padding = input.value;
      const s = getComputedStyle(box);
      document.getElementById('out').textContent =
        'top ' + s.paddingTop + ', right ' + s.paddingRight +
        ', bottom ' + s.paddingBottom + ', left ' + s.paddingLeft;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

נסו 8px, 8px 24px, 0 0 40px ו-1em 5%. ערך לא תקין, כמו -10px, נזנח והקופסה שומרת את ה-padding התקין האחרון.

צד אחד בכל פעם

לכל צד יש מאפיין משלו, שברור יותר מקיצור של ארבעה ערכים כשרוצים לשנות רק צד אחד:

.card {
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

קיצור ואחריו צד אחד הוא תבנית נפוצה: קובעים הכול, ואז מתקנים צד אחד.

.card {
  padding: 16px;
  padding-bottom: 32px; /* only the bottom changes */
}

הסדר חשוב כאן: קיצור padding שנכתב אחרי padding-bottom היה מאפס את הצד התחתון חזרה ל-16px.

padding לוגי: padding-inline ו-padding-block

padding-left ו-padding-right הם פיזיים: הם נשארים באותו צד בכל שפה. המאפיינים הלוגיים עוקבים במקום זאת אחרי כיוון הכתיבה, וזה מה שרוצים באתר שמוצג גם מימין לשמאל:

מאפיין לוגי	באנגלית (משמאל לימין)	בערבית (מימין לשמאל)
`padding-inline-start`	שמאל	ימין
`padding-inline-end`	ימין	שמאל
`padding-inline`	שמאל וימין	ימין ושמאל
`padding-block`	למעלה ולמטה	למעלה ולמטה

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Logical padding</title>
  <style>
    .note {
      padding-block: 8px;
      padding-inline-start: 40px; /* space before the text */
      padding-inline-end: 12px;
      border-inline-start: 6px solid #2563eb;
      background: #e5e7eb;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <p class="note">The wide padding is at the start of the line.</p>
  <p class="note" dir="rtl">Right to left: the edge and the wide padding switch sides</p>
</body>
</html>

padding מגדיל את הקופסה (אלא אם יש border-box)

כברירת מחדל, width הוא רוחב התוכן בלבד, וה-padding מתווסף מעליו. קופסה עם width: 200px ו-padding: 20px רחבה 240px:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding and width</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      background: #bfdbfe;
      margin-bottom: 10px;
    }
    .border-box { box-sizing: border-box; background: #bbf7d0; }
  </style>
</head>
<body>
  <div class="box">content-box</div>
  <div class="box border-box">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.offsetWidth + 'px wide';
    });
  </script>
</body>
</html>

box-sizing: border-box שומר את הקופסה ב-200px ולוקח את ה-padding מבפנים. הדף על box model מכסה את החישוב המלא.

padding באחוזים

padding באחוזים נמדד ביחס לרוחב של ההורה, בכל ארבעת הצדדים, כולל למעלה ולמטה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent padding</title>
  <style>
    .parent { width: 300px; height: 100px; background: #e5e7eb; }
    .child {
      padding-top: 10%; /* 10% of 300px = 30px, not 10% of 100px */
      background: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c"></div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'padding-top: ' + getComputedStyle(document.getElementById('c')).paddingTop;
  </script>
</body>
</html>

מכאן הגיע הטריק הישן "padding-top: 56.25%" לקופסאות וידאו ביחס 16:9. היום aspect-ratio: 16 / 9 עושה את אותה עבודה ישירות.

padding על כפתורים וקישורים

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

.btn {
  display: inline-block; /* lets vertical padding take space in the line */
  padding: 10px 18px;    /* a comfortable touch target */
}

ערכים ש-padding מקבל

ערך	דוגמה	הערות
אורך	`12px`, `1rem`, `0.5em`	`em` משתנה לפי גודל הגופן של האלמנט
אחוז	`5%`	מרוחב הבלוק המכיל
`0`	`padding: 0`	לא צריך יחידה
שלילי	`-10px`	לא תקין, נזנח
`auto`	`auto`	לא תקין ל-padding (עובד ל-margin)

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

סדר שגוי בקיצור של ארבעה ערכים. הסדר הוא למעלה, ימין, למטה, שמאל, עם כיוון השעון.
קופסה שגדלה כשמוסיפים padding. הגדירו box-sizing: border-box.
שימוש ב-padding כדי להפריד בין שני אלמנטים. מרווח בין אלמנטים הוא margin; padding הוא מרווח בתוך אלמנט אחד. ראו margin מול padding.
padding אנכי על קישור inline שחופף שורות אחרות. הפכו אותו ל-inline-block.
padding שלילי או padding: auto. שניהם לא תקינים ונזנחים בשקט.

שאלות נפוצות

מה זה padding ב-CSS?

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

באיזה סדר נכתבים הערכים בקיצור padding?

עם כיוון השעון מלמעלה: padding: top right bottom left;. עם שלושה ערכים הסדר הוא למעלה, שמאל וימין, למטה; עם שני ערכים, למעלה ולמטה ואז שמאל וימין; עם ערך אחד, כל ארבעת הצדדים.

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

עם ברירת המחדל box-sizing: content-box, כן: ה-padding מתווסף ל-width ול-height. עם box-sizing: border-box, ה-padding נלקח מתוך הרוחב, כך שהאלמנט שומר על הגודל שהגדרתם.

ביחס למה מחושב padding באחוזים?

ביחס לרוחב הבלוק המכיל, בכל ארבעת הצדדים. padding-top: 50% הוא חצי מהרוחב של ההורה, לא מהגובה שלו, ולכן טריקים ישנים של יחס גובה-רוחב השתמשו ב-padding אנכי.

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

לא. ערך padding שלילי לא תקין וההצהרה נזנחת. כדי למשוך תוכן החוצה, השתמשו במקום זאת ב-margin שלילי.

איך מוסיפים padding ב-HTML?

עם CSS, בגיליון סגנונות או במאפיין style: <div style="padding: 16px;">. ל-HTML אין מאפיין padding לאלמנטים רגילים; המאפיין הישן cellpadding של טבלאות מיושן והוחלף ב-padding על td ו-th.

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