מאמרים אחרונים מאמרים אחרונים
23/01/2019 15:14
אנו במיזם גרופ קיבלנו את תו אמון הציבור להגינות בעסקים.
24/10/2018 19:39
מתכנן הקמת חנות מתנות מקוונת? אספנו עבורך כל מה שחשוב לדעת לפני שאתה יוצא לדרך.
15/09/2018 19:27
יש לך עסק למכירת רהיטים או שאתה מתכנן אחד כזה בקרוב? קרא איך הקמת חנות וירטואלית למכירה של רהיטים בא...
06/09/2018 18:05
מחשבים זו אהבת חייך? האם חשבת למכור מחשבים, טלפונים סלולריים, קונסולות משחק וציוד היקפי באינטרנט? המ...
24/08/2018 13:39
הקמת פורטל בריאות באנגלית
תגובות אחרונות תגובות אחרונות
בניית חנות וירטואלית
29/08/2018 13:50
חברה לבניית אתר וחנות וירטואלי...
שפת שרת מול שפת לקוח
04/07/2018 15:45
היי, השפות PHP ו-PYTHON שתי...
שפת שרת מול שפת לקוח
04/07/2018 14:10
מה ההבדל בין php ל python

עיצוב רווחים ושוליים

»
»
עיצוב רווחים ושוליים

כיצד משתמשים בתכונות padding ו- margin על מנת להגדיר את המיקום של עצמים בעמוד ואת הרווחים ביניהם?

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

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

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

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

div.one {
    width:340px;
    padding:10px;
    border:2px dashed blue;
    margin:18px;
}

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

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

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

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

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

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

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

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

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

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

th {
    padding:10px;
}

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

h1 {
    padding-top:5px;
    padding-bottom:10px;
    padding-right:5px;
    padding-left:5px;
}

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

  • ערך אחד - יגדיר את עובי ה- padding עבור כל צידי האובייקט בבת-אחת.
  • שני ערכים - יתייחסו אל הרווח מעל ומתחת לאובייקט יחדיו ואל הרווחים בצדדים יחדיו. הערך הראשון יגדיר את הרווח העליון והתחתון והשני - יגדיר את הצדדיים.
  • שלושה ערכים - הערך הראשון יגדיר את הרווח מעל האובייקט, השני יגדיר את הרווחים בצדדים, והשלישי - את הרווח מתחת לאובייקט.
  • ארבעה ערכים - הראשון יגדיר את הרווח מעל האובייקט והערכים הבאים יגדירו את שאר הרווחים לפי כיוון השעון. כמו בדוגמה הבאה:
h1 {
    padding:5px 10px 20px 10px;
}

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

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

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

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

p {
    margin-top:10px;
    margin-bottom:20px;
    margin-right:5px;
    margin-left:5px;
}

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

p {
    margin:10px 5px 2px 10px;
}

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

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

div.ovlp {
    margin-right:-20px;
}

הערך auto

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

table {
    margin:auto;
}

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

 

הוספת תגובה

רוצה שנקפיץ גם את העסק שלך?

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

שילוב מנצח של טכנולוגיה שהיא חוד החנית עם ליווי אישי להצלחה!

 

לא מהססים! ממלאים את הטופס או מתקשרים עכשיו 077-7644819

 
שנקפיץ לך את העסק?
לחץ כאן
התקשר עכשיו 077-7644819
או מלא את הטופס להלן: