שוליים לעומת ריפוד
הבדל בין שוליים וריפוד הוא היבט חשוב ב-CSS שכן שוליים וריפוד הם שני מושגים חשובים המשמשים ב-CSS כדי לספק מרווח בין פריטים שונים. ריפוד ושוליים אינם ניתנים להחלפה ויש להם מטרות שונות ולכן יש להשתמש בהם כראוי. הריפוד הוא הרווח בין התוכן לגבול הבלוק. השוליים, לעומת זאת, הם החלל שמחוץ לגבול של בלוק. השוליים מפרידים בין בלוקים מגושים סמוכים בעוד שהריפוד מפריד בין הגבול לתוכן.
מה זה ריפוד?
ב-CSS (Cascading Style Sheets), ריפוד הוא הרווח השמור בין התוכן לגבול.הוא מפריד בין תוכן הבלוק לבין הקצה שלו. הריפוד שקוף וכולל גם את תמונת הרקע או צבע הרקע של האלמנט. כמות הריפוד של אלמנט מוגדרת באמצעות המונח "ריפוד" בקוד CSS. לדוגמה, כדי להוסיף ריפוד של 25 פיקסלים סביב התוכן ניתן להשתמש בקוד הבא.
div {
width: 300px;
height: 300px;
padding: 25px;
גבול: 25px מוצק;
}
במידת הצורך, ניתן לציין בנפרד ערכי ריפוד שונים גם עבור שמאל, ימין, עליון ותחתון. קטע הקוד הבא מציין ערכי ריפוד שונים עבור כל צד.
div {
width: 300px;
height: 300px;
padding-top: 25px;
padding-bottom: 35px;
padding-left: 5px;
padding-right: 10px;
גבול: 25px מוצק;
}
מה זה Margin?
ב-CSS (Cascading Style Sheets), השוליים הם הרווח שמחוץ לגבול. זה מפריד בלוק מבלוקים אחרים. השוליים גם הם שקופים, אבל הבדל גדול עם ריפוד הוא שהשוליים אינם כוללים תמונות רקע או צבעי רקע שהוחלו על האלמנט. כמות השוליים ב-CSS מוגדרת באמצעות המונח "שוליים". קטע הקוד הבא החיל שוליים של 25 פיקסלים סביב בלוק ה-div.
div {
width: 320px;
height: 320px;
גבול: 5px מוצק;
margin: 25px;
}
ניתן לציין ערכים שונים גם לצדדים שונים של הבלוק. קטע הקוד הבא מחיל ערכי שוליים שונים עבור כל צד.
div {
width: 320px;
height: 320px;
גבול: 5px מוצק;
margin-top: 25px;
margin-bottom: 35px;
margin-left: 5px;
margin-right: 10px;
}
מה ההבדל בין Margin לבין ריפוד?
• ריפוד הוא הרווח בין הגבול לתוכן בעוד ששוליים הם הרווח שמחוץ לגבול.
• ריפוד מפריד בין תוכן הבלוק לבין הגבול. השוליים מפרידים בלוק אחד מהשני.
• ריפוד מורכב מתמונות הרקע וצבעי הרקע שהוחלו על תוכן בעוד השוליים אינם מכילים כאלה.
• השוליים של בלוקים סמוכים יכולים לחפוף בעוד הריפוד אינו חופף.
סיכום:
ריפוד לעומת שוליים
ריפוד הוא החלל בתוך הגבול של בלוק שמפריד בין הגבול לתוכן. השוליים הם המרווח מחוץ לגבול המפריד בין גוש לגושים הסמוכים. הבדל נוסף הוא שהריפוד כולל את תמונת הרקע וצבעי הרקע שהוחלו סביב התוכן בעוד השוליים אינם מכילים אותם. השוליים של בלוקים סמוכים עשויים לפעמים לחפוף כאשר הדפדפן מעבד את הדף, אבל עבור ריפוד דבר כזה לא יקרה.
