הפודקאסט של CSS - 013: ריווח
נניח שיש לכם אוסף של שלוש קופסאות אחת מעל השנייה, ואתם רוצים רווח ביניהן. כמה דרכים לעשות את זה ב-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, והאלמנט שלכם בעל ערך margin של 20%: בכל אחד מצידי הרכיב יהיה שוליים מחושבים של 50px.
אפשר גם להשתמש בערך של auto בתור שוליים.
ברכיבים ברמת הבלוק עם גודל מוגבל,
השוליים של auto יתפסו את השטח הזמין בכיוון שבו הם מוחלים.
דוגמה טובה לכך היא המודול של ה-flexbox, שבו הפריטים מתרחקים זה מזה.
דוגמה טובה נוספת לשוליים של auto היא wrapper שממורכז בצורה אופקית וברוחב מקסימלי.
סוג wrapper כזה משמש לעיתים קרובות כדי ליצור עמודה מרכזית עקבית באתר.
.wrapper {
max-width: 400px;
margin: 0 auto;
}
במצב הזה, השוליים מוסרים מהצד העליון ומהצד התחתון (הבלוק), ו-auto חולק את הרווח בין צד שמאל וצד ימין (בתוך השורה).
שוליים שליליים
אפשר להשתמש בערכים שליליים גם לשוליים. במקום להוסיף רווח בין רכיבי אח סמוכים, הדבר יצמצם את הרווח ביניהם. אם מצהירים על ערך שלילי שגדול יותר מהשטח הזמין, עלולות להיווצר אלמנטים חופפים.
כיווץ שוליים
'כיווץ שוליים' הוא קונספט מסובך, אבל הרבה פעמים עלולים להיתקל בו במהלך בנייה של ממשקים. נניח שיש 2 רכיבים: כותרת ופסקה עם שוליים אנכיים:
<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, השוליים שלו לא יתכווצו יותר בעצמם ויטופלו כתיבה כלשהי עם תוכן.
בדיקת ההבנה
בחינת הידע שלכם בנושא כיווץ שוליים
אם לשני אלמנטים מוערמות זה על זה יש 20 פיקסלים של שוליים עליונים ו-30 פיקסלים של שוליים תחתונים, כמה מקום יהיה ביניהם?
מניעה של כיווץ שוליים
אם רכיב מסוים נמצא במיקום מוחלט
באמצעות position: absolute, השוליים לא יתכווצו יותר.
בנוסף, השוליים לא יתכווצו אם משתמשים גם בנכס float.
אם יש לכם רכיב ללא שוליים בין שני רכיבים עם שולי בלוק, גם השוליים לא יתכווצו כי שני הרכיבים עם שולי הבלוק כבר לא אחים ואחיות: הם רק אחים ואחיות.
בשיעור הפריסה למדתם שמאגרי flexbox ו-grid דומים מאוד לקונטיינרים בלוקים, אבל מטפלים בהם באופן שונה מאוד באלמנטים הצאצאים שלהם. זהו המצב גם במקרה של כיווץ שוליים.
אם ניקח את הדוגמה המקורית מהשיעור ונחיל 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.
מיקום
גם במודול הפריסה, אם מגדירים ל-position ערך שהוא כל דבר מלבד static, אפשר להוסיף רכיבים בעזרת המאפיינים top, right, bottom ו-left.
יש כמה הבדלים באופן הפעולה של הערכים הכיווניים האלה:
- רכיב עם
position: relativeישמור על מקומו בזרימת המסמך, גם אם הגדרתם את הערכים האלה. המיקומים יהיו יחסיים גם למיקום של הרכיב. - רכיב עם
position: absoluteיבסס את הערכים הכיווניים מהמיקום של ההורה היחסי. - רכיב עם
position: fixedיבסס את הערכים הכיווניים על אזור התצוגה. - רכיב עם
position: stickyיחיל את הערכים הכיווניים רק כשהוא במצב עגינה/תקוע.
במודול Log properties, תלמדו על המאפיינים inset-block ו-inset-inline, שמאפשרים להגדיר ערכי כיווניות בהתאם למצב הכתיבה.
שני המאפיינים הם מקוצרים שמשלבים את הערכים start ו-end, ולכן הם מקבלים ערך אחד להגדרה עבור start ו-end או שני ערכים נפרדים.
רשת ו-flexbox
לסיום, גם ברשת וגם ב-flexbox אפשר להשתמש במאפיין gap כדי ליצור רווח בין רכיבי צאצא.
המאפיין gap הוא קיצור ל-row-gap ול-column-gap,
אפשר להזין בו ערך אחד או שניים, שיכולים להיות אורכים או אחוזים.
אפשר גם להשתמש במילות מפתח כמו unset, initial וinherit.
אם תגדירו רק ערך אחד, אותו gap יחול גם על השורות וגם על העמודות, אבל אם תגדירו את שני הערכים, הערך הראשון הוא row-gap והערך השני הוא column-gap.
גם עם flexbox וגם עם Grid אפשר ליצור רווח בעזרת יכולות ההפצה והיישור, שאנחנו מלמדים במודול הרשת ובמודול Flexbox.
יצירת ריווח עקבי
מומלץ מאוד לבחור אסטרטגיה ולהישאר איתה כדי ליצור ממשק משתמש עקבי עם זרימה וקצב טובים. דרך טובה לעשות זאת היא להשתמש באמצעים עקביים לריווח.
לדוגמה, אפשר להתחייב להשתמש ב-20px כמדד עקבי לכל הפערים בין הרכיבים – שנקראים מרזבים – כדי שכל הפריסות ייראו עקביות.
תוכלו גם להשתמש ב-1em כמרווח האנכי בין התוכן בזרימה, כדי להשיג ריווח עקבי על סמך font-size של הרכיב.
לא משנה באיזו דרך תבחרו, כדאי לשמור את הערכים האלה כמשתנים (או מאפיינים מותאמים אישית של CSS) כדי להמיר את הערכים האלה לאסימונים וכדי שיהיה קל יותר לשמור על העקביות.
:root {
--gutter: 20px;
--spacing: 1em;
}
h1 {
margin-left: var(--gutter);
margin-top: var(--spacing);
}
מאפיינים מותאמים אישית כאלה מאפשרים להגדיר אותם פעם אחת, ולאחר מכן להשתמש בהם בכל ה-CSS. אחרי שהם יתעדכנו, באופן מקומי בתוך רכיב או באופן גלובלי, הערכים יעברו בסדר יורד והערכים המעודכנים יבואו לידי ביטוי.
בדיקת ההבנה
בחינת הידע שלך בנושא ריווח
אפשר להשתמש ב-HTML לרווחים כאשר...
כדי ליצור מרחב בתוך תיבה, אפשר להשתמש ב...
כדי ליצור מרחב מחוץ לתיבה, אפשר להשתמש ב...
כדי ליצור רווח בין תיבות, יש להשתמש ב...