שוליים וריפוד יכולים להיות מבלבלים מכיוון שבמובנים מסוימים הם נראים אותו הדבר: רווח לבן סביב תמונה או אובייקט. הנה מה שאתה כמעצב אתרים צריך לדעת על ההבדלים ביניהם.
Padding
ריפוד הוא הרווח בין תמונה או תוכן תא לבין הגבול החיצוני שלה. בתמונה למטה, הריפוד הוא האזור הצהוב מסביב לתוכן. במקרה זה, הריפוד מסתובב לחלוטין סביב התוכן: הצד העליון, התחתון, הימני והשמאלי. אתה יכול לציין כמה ריפוד (באחוזים, פיקסלים, נקודות וכו') לכל צד, והם לא חייבים להיות זהים. בדרך זו, תוכל למקם תוכן בתוך אלמנט.
Margins
לעומת זאת, השוליים הם הרווחים מחוץ לגבול של אלמנט, בין האלמנט לכל מה שצמוד לו. בתמונה השוליים הם האזור הלבן שמחוץ לכל האובייקט. כמו הריפוד, השוליים עוברים לחלוטין סביב התוכן בדוגמה זו: בצד העליון, התחתון, הימני והשמאלי. אתה יכול להשתמש בשוליים כדי למקם divs ורכיבים אחרים בדף.
בדוק תמיד את הדפים שלך בדפדפנים שונים, במערכות הפעלה שונות (כולל נייד) ובגדלי מסך כדי לוודא שהם מוצגים בדיוק כפי שאתה רוצה שהם יוצגו.
