ריווח

הפודקאסט של שירות ה-CSS – 013: Spacing

נניח שיש לכם אוסף של שלוש קופסאות. מוערמים אחד על השני, ואתם רוצים שיהיה רווח ביניהם. בכמה דרכים אפשר לעשות את זה בשירות CSS?

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

ריווח HTML

HTML עצמו מספק כמה שיטות לרכיבי רווח. הרכיבים <br> ו-<hr> מאפשרים רווח לרכיבים בכיוון הבלוק, אם אתם בשפה לטינית, היא מלמעלה למטה.

אם משתמשים ברכיב <br>, תיצור מעבר שורה, בדיוק כמו כשמקישים על מקש Enter במעבד תמלילים.

הרכיב <hr> יוצר קו אופקי עם רווח משני הצדדים, שנקרא margin.

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

שוליים

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

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

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

• ערך אחד יחול על כל הצדדים. (margin: 20px).
• שני ערכים: הערך הראשון יחול על הצד העליון ועל הצד התחתון, והערך השני יוחל על צד שמאל וצד ימין. (margin: 20px 40px)
• שלושה ערכים: הערך הראשון הוא top, הערך השני הוא left וגם right, והערך השלישי הוא bottom. (margin: 20px 40px 30px).

ניתן להגדיר שוליים באמצעות אורך, אחוז או ערך אוטומטי, למשל 1em או 20%. אם משתמשים באחוזים, הערך יחושב לפי הרוחב של הבלוק שמכיל את הרכיב.

המשמעות היא שאם הבלוק שמכיל את הרכיב הוא ברוחב 250px. והרכיב שלך מכיל את הערך 20%, שהוא margin: לכל צד של הרכיב שלך יהיה שוליים מחושבים של 50px.

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

דוגמה טובה נוספת לשוליים של auto היא wrapper ממורכז אופקית שיש לו רוחב מקסימלי. סוג זה של wrapper משמש לעיתים קרובות ליצירת עמודה מרכזית עקבית באתר.

.wrapper {
    max-width: 400px;
    margin: 0 auto;
}

כאן, השוליים מוסרים מהצד העליון ומהצד התחתון (בלוקים), ו-auto משתף את הרווח בין הצד השמאלי לצד הימני (מוטמע).

שוליים שליליים

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

כיווץ שוליים

כיווץ שוליים הוא קונספט מורכב, אבל זה משהו שתיתקלו בו בדרך כלל כשבונים ממשקים. נניח שיש לכם שני רכיבים: כותרת ופסקה שבשניהם יש שוליים אנכיים:

<article>
  <h1>My heading with teal margin</h1>
  <p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>

h1 {
    margin-bottom: 2rem;
}

p {
    margin-top: 3rem;
}

במבט ראשון, נראה לך שאם תחשוב שפסקה תרווח 5em מהכותרת, כי השילוב של 2rem ו-3rem מחושב ל-5rem. עם זאת, השוליים האנכיים מתכווצים, לכן הרווח הוא למעשה 3rem.

כיווץ שוליים פועל על ידי בחירת הערך הגדול ביותר של שני רכיבים מחוברים עם שוליים אנכיים המוגדרים בצדדים הצמודים. החלק התחתון של h1 פוגש בחלק העליון של p, לכן נבחר הערך הגדול ביותר של השוליים התחתוניים של השדה h1 והשוליים העליונים של הערך p. אם הערך של h1 היה 3.5rem מהשוליים התחתוניים, אז הרווח ביניהם יהיה 3.5rem כי הוא גדול מ-3rem. רק בלוקים של שוליים מכווצים, ולא שוליים מוטבעים (אופקיים).

כיווץ שוליים עוזר גם ברכיבים ריקים. אם יש לך פסקה עם שוליים עליונים ותחתונים של 20px, הוא ייצור רק 20px של רווח: ולא 40px. אם תוסיפו משהו לפנים של הרכיב הזה, כולל padding, השוליים שלו לא יתכווצו יותר בפני עצמם ויטופלו כמו כל תיבה עם תוכן.

בדיקת ההבנה

בחינת הידע שלכם לגבי כיווץ שוליים

מניעת כיווץ של השוליים

אם תיצרו אלמנט במיקום מוחלט, באמצעות position: absolute, השוליים לא יתכווץו יותר. גם השוליים לא יתכווץו אם תשתמשו גם במאפיין float.

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

בשיעור פריסה למדתם שקנטיינרים של Flexbox ושל רשת דומים מאוד לקונטיינרים של בלוקים. אבל מטפלים באלמנטים הצאצאים שלהם בצורה שונה מאוד. זה המצב גם במקרה של כיווץ שוליים.

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

לפעמים קשה להבין כיווץ של שוליים ושוליים אבל הבנה מפורטת איך הם פועלים, היא מאוד מועילה, לכן כאן מומלץ מאוד.

מרווח

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

בהתאם לדגם הקופסה שבו אתם משתמשים - שסומנו שיעור מודל תיבה —padding יכול להשפיע גם על הממדים הכוללים של הרכיב.

הנכס padding הוא קיצור של padding-top, padding-right, padding-bottom ו-padding-left. בדיוק כמו ב-margin, ל-padding יש גם תכונות לוגיות: padding-block-start, padding-inline-end, padding-block-end וגם padding-inline-start.

מיקום

כמו כן, אפשר למצוא מידע נוסף במודול layout אם מגדירים ל-position ערך שאינו static, אפשר להוסיף רווחים באמצעות המאפיינים top, right, bottom ו-left. יש כמה הבדלים באופן הפעולה של הערכים הכיווניים האלה:

• רכיב עם position: relative ישמור על המיקום שלו בתהליך המסמך. גם אם תגדירו את הערכים האלה. הם יהיו גם ביחס למיקום של הרכיב שלכם.
• רכיב עם position: absolute יבסס את ערכי הכיוון מהמיקום של ההורה היחסי.
• רכיב עם position: fixed תבסס את ערכי הכיוון על אזור התצוגה.
• רכיב עם position: sticky המערכת תחיל את ערכי הכיוון רק כשהוא במצב עגינה/תקוע.

במודול מאפיינים לוגיים, לך מידע על הנכסים inset-block ו-inset-inline, שמאפשרים להגדיר ערכי כיוון בהתאם למצב הכתיבה.

שני הנכסים הם קיצורי דרך שמשלבים את הערכים start ו-end ולכן אפשר לקבל ערך אחד שיוגדר עבור start וגם עבור end, או שני ערכים נפרדים.

רשת ו-Flexbox

לבסוף, גם ברשת וגם ב-Flexiblebox אפשר להשתמש במאפיין gap כדי ליצור רווח בין רכיבי צאצא. הנכס gap הוא קיצור של row-gap ו-column-gap, הוא מקבל ערך אחד או שניים, ויכול להיות אורכים או אחוזים. אפשר גם להשתמש במילות מפתח כמו unset, initial ו-inherit. אם מגדירים רק ערך אחד, אותו gap יחול גם על השורות וגם על העמודות, אבל אם תגדירו את שני הערכים, הערך הראשון הוא row-gap והערך השני הוא column-gap.

גם עם Flexbox וגם עם רשת, אפשר ליצור מרחב באמצעות יכולות ההפצה והיישור שלהם, שבו נעסוק מודול רשת Flexbox.

יצירת ריווח עקבי

כדאי מאוד לבחור אסטרטגיה ולהישאר איתה כדי לעזור לכם ליצור ממשק משתמש עקבי עם זרימה וקצב טובים. דרך טובה לעשות זאת היא להשתמש במדדים עקביים לקביעת הריווח.

לדוגמה, אפשר להתחייב להשתמש ב-20px כמדד עקבי לכל הפערים בין אלמנטים (שנקראים מרזבים), שכל הפריסות נראות ועקביות. אפשר גם להשתמש ב-1em בתור המרווח האנכי בין תוכן הזרימה, כך תשיגו ריווח עקבי על סמך font-size של הרכיב. לא משנה מה תבחרו, צריך לשמור את הערכים האלה בתור משתנים (או מאפיינים מותאמים אישית של CSS) להמיר את הערכים האלה לאסימונים כדי שיהיה קל יותר לשמור על העקביות.

:root {
  --gutter: 20px;
  --spacing: 1em;
}

h1 {
  margin-left: var(--gutter);
  margin-top: var(--spacing);
}

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

בדיקת ההבנה

בחינת הידע שלכם לגבי רווחים