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

מה זה margin

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).

בניגוד ל-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>

margins אוטומטיים לא ממרכזים אנכית בזרימה הרגילה (margins אנכיים עם auto הופכים ל-0) ולא עושים כלום על אלמנטים inline. לסקירה מלאה של מרכוז, ראו איך למרכז div.

התמזגות margins

כששני margins אנכיים נוגעים זה בזה, הם לא מתחברים. הדפדפן שומר רק את הגדול מביניהם. כאן לקופסה הראשונה יש 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>

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

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

בהורה הראשון, ה-margin של 30px של הילד התמזג דרך הקצה העליון של ההורה, ולכן הוא דוחף את כל ההורה למטה במקום ליצור מקום אפור בתוכו. כל אחד מאלה עוצר את זה:

display: flow-root על ההורה (בניגוד ל-overflow: hidden, הוא לא חותך כלום).
padding או גבול בקצה העליון של ההורה.
הורה מסוג flex או grid: margins של פריטי flex ו-grid אף פעם לא מתמזגים.

margins אופקיים אף פעם לא מתמזגים, וגם לא margins של אלמנטים עם float או עם מיקום absolute.

margins שליליים

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

<!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, margin עם 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 על אלמנט inline. margins אוטומטיים על span, a או img שנשאר inline שווים 0. הפכו אותו ל-display: block.
לחבר שני margins אנכיים ולצפות לסכום. הם מתמזגים לגדול מביניהם; השתמשו ב-gap ב-flex או ב-grid, או בכיוון margin אחד באופן עקבי.
margin של ילד שדוחף את ההורה שלו. זו התמזגות בין הורה לילד; הוסיפו display: flow-root להורה.
שימוש ב-margin למרווח שצריך רקע. margin שקוף; השתמשו ב-padding.

שאלות נפוצות

מה זה margin ב-CSS?

Margin הוא המרווח מחוץ לגבול של אלמנט. הוא שקוף ודוחף אלמנטים שכנים הלאה. מגדירים אותו עם margin או עם המאפיינים של צד אחד margin-top, margin-right, margin-bottom ו-margin-left.

מה margin: 0 auto עושה?

הוא קובע את ה-margins העליון והתחתון ל-0 ומחלק את המקום האופקי שנשאר שווה בין ה-margin השמאלי לימני, וכך ממרכז אופקית אלמנט בלוק. האלמנט צריך רוחב קטן מהמיכל שלו, למשל max-width: 600px.

למה margin auto לא ממרכז את האלמנט שלי?

בדרך כלל כי לאלמנט אין רוחב (בלוק ממלא את המיכל שלו, כך שאין מה לחלק), או כי הוא inline (span, a, img כברירת מחדל), ושם margins אוטומטיים שווים 0. תנו לו רוחב ו-display: block, או מרכזו אותו מההורה עם flexbox או grid.

מה זה התמזגות margins?

כששני margins אנכיים נפגשים, למשל ה-margin התחתון של פסקה אחת וה-margin העליון של הבאה, הדפדפן משתמש רק בגדול מביניהם במקום לחבר אותם. זה קורה רק ל-margins אנכיים של קופסאות בלוק בזרימה הרגילה, לא בפריסות flex או grid.

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

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

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