מדריך CSS מספר 13 - איך להשתמש בPadding

שלבים

1. 1

   שלב 1

   בדומה להגדרת הmargins, גם כאן מגדירים את המרווח מימין, משמאל, מלמעלה ומלטה. הרווח יכול להיות מוגדר בפיקסלים, אחוזים או סנטימטרים. דוגמא לשימוש בPadding:
2. 2

   שלב 2

   
   p { border-style:solid; border-color:blue; } p.padding { padding-right:50px; padding-left:50px; }

   Paragraph with paddings.

4. 3

   שלב 3

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

   שלב 4

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

   שלב 5

   padding:50px;
7. 6

   שלב 6

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

   שלב 7

   padding:30px 60px;
9. 8

   שלב 8

   בצורה הזו אנו מגדירים שהמרווח השמאלי והימני הם בגודל 60 פיקסלים והמרווח העליון והתחתון הם בגודל 30 פיקסלים.
10. 9

    שלב 9

    padding:30px 60px 90px;
11. 10

    שלב 10

    כאן מוגדר שהמרווח העליון הוא בגודל 30 פיקסלים, המרווח הימני והשמאלי בגודל 60 פיקסלים והמרווח התחתון בגודל 90 פיקסלים.
12. 11

    שלב 11

    padding:30px 60px 70px 90px;
13. 12

    שלב 12

    מה שכתבנו בחוק הCSS הזה: המרווח העליון הוא 30 פיקסלים. המרווח הימני הוא 60 פיקסלים. המרווח התחתון הוא 70 פיקסלים. המרווח השמאלי הוא 90 פיקסלים. הרעיון הוא פשוט וחוסך זמן, הקטע הוא לזכור איזה מיקום בסדרת המספרים הזו מייצג את המרווח הרצוי.