עיצוב רווחים ושוליים - margin, padding

ריווח ב-CSS

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

ה-CSS מאפשר לנו להגדיר את התכונות הבאות עבור כל אלמנט:

• padding - זהו רווח סביב התוכן. עובי רווח זה כלול בתוך גודל האובייקט.
• margin - זהו רווח סביב גבולות האלמנט.
• border - גבול סביב האובייקט (ראה פירוט בפרק הקודם). עובי הגבול כלול בגודל האובייקט.

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

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

רוחב התוכן: 340 פיקסלים

+ רוחב padding: סה"כ 20 פיקסלים (מכל צד 10 פיקסלים)

+ עובי הגבולות: סה"כ 4 פיקסלים (2 פיקסלים מכל צד)

+ רוחב הריווח החיצוני (margins): סה"כ 36 פיקסלים (18 פיקסלים מכל צד)

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

באופן כללי, רוחב אובייקטים הוא תמיד גודל התוכן + רוחב הריווח הפנימי (padding). זאת ללא הגבולות וללא הריווח החיצוני (margin). למשל בדוגמא הנ"ל, רוחב האובייקט הינו 360 פיקסלים. כלומר, במידה ונשים תמונת רקע לאובייקט, היא תוצג רק בתוך הרוחב של האובייקט (אותם 360 פיקסלים) ולא תיכנס לריווח החיצוני, שלמעשה מהווה הפרדה בין האובייקטים באתר ולא חלק מאובייקט זה או אחר.

הגדרת רווחים Padding

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

בדוגמה הבאה הרווח בין הטקסט לגבולות התאים בכותרת הטבלה יהיה 10px מכל הכיוונים:

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

ניתן לקצר את תכונות הרווחים ע"י שימוש בתכונת הקיצור padding. בשיטה המקוצרת ניתן להגדיר בין ערך אחד לארבעה ערכים:

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

הגדרת שוליים Margins

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

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

את התכונות המשמשות להגדרת שוליים ניתן לראות בדוגמה הבאה. כאן ניתן לראות כיצד מגדירים בנפרד את רוחב השוליים מכל צד:

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

סדר הערכים יתחיל תמיד מהשוליים העליונים ולאחר מכן לפי כיוון השעון. ניתן לציין בין ערך אחד לארבעה ערכים באותו אופן שפורט עבור padding.

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

הערך auto

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

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