יצירת קשר עם חברת בניית אתרים צור קשר

 077-7644819
חייגו או השאירו הודעתכם

 
מאמרים אחרונים מאמרים אחרונים
09/08/2023 17:16
בניית חנות באינטרנט למכירה של מוצרים לחיות מחמד
12/03/2023 22:03
במאמר זה נסקור את התפתחות שפת צד השרת PHP מראשית ימיה, לכל אורך גירסאותיה השונות עד לאן שהיא הגיעה ב...
08/01/2023 23:40
הקמת אתר מכירות לדלתות פנים וחוץ לבתים פרטיים ולעסקים וציוד פירזול
תגובות אחרונות תגובות אחרונות
עיצוב רקע - background
12/06/2023 19:52
היי תמר, עושים את זה באמצעות ...
עיצוב רקע - background
28/05/2023 21:36
אני רוצה ליצור כפתור שהרקע שלו...
עיצוב רקע - background
15/12/2022 20:22
איך עושים שיראו את כל התמונת ר...
תגובות אחרונות פוסטים אחרונים בפורום
08/11/2022 19:11
היי, יש לי אתר קצת מורכב. הוא...
08/11/2022 19:09
היי, אני עוסק בענף הטניס ויש ...
08/11/2022 19:03
היי, ראיתי בכל מיני אתרים שמש...

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

  1. דף הבית
  2. מדריך HTML5 למתכנת המתחיל
  3. עיצוב רווחים ושוליים - margin, padding
כיצד משתמשים בתכונות padding ו- margin על מנת להגדיר את המיקום של עצמים בעמוד ואת הרווחים ביניהם?

ריווח ב-CSS

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

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

 

הוספת תגובה

כתיבת קוד ה-CSS

21/04/2020 12:37
דוד כהן
היי,
קוד ה-CSS יכול להרשם בכל קובץ טקסט פשוט.
אפשר גם ב-Visual Studio.
אנחנו ממליצים על עורך תוכן מאוד פשוט וקל לשימוש בשם notepad++
חפש בגוגל ותתקין בחינם.
בברכה,
דוד

איפה כותבים את העיצוב בcss?

02/04/2020 6:24
מלכי פרוכטר
את העיצוב בשפת css כותבים בדף רגיל של html? או בתוכנה אחרת? יש את זה בvisual studio? ואיך מחברים את זה? תודה רבה
YouTube previewPlay

שנקפיץ יחד את העסק שלך לגבהים חדשים?

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

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

 

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

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