מדריך CSS מספר 12 - איך לעשות מרווחים (Margins)

שלבים

1. 1

   שלב 1

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

   שלב 2

   
   p { border-style:solid; border-color:red; } p.margin { margin-top:50px; margin-right:50px; margin-left:50px; }

   Paragraph number 1

   Paragraph number 2 - with margins

4. 3

   שלב 3

   
   כמו שאתם רואים, הגדרנו בדוגמא שבחלק העליון (margin-top), בחלק הימני (margin-right) ובחלק השמאלי (margin-left) יהיה מרווח של 50px (פיקסלים). פסקה אחת הגדרנו כברירת מחדל (ללא מרווחים) ופסקה שניה היא עם מרווחים.
5. 4

   שלב 4

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

   שלב 5

   margin:50px;
7. 6

   שלב 6

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

   שלב 7

   margin:30px 60px;
9. 8

   שלב 8

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

    שלב 9

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

    שלב 10

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

    שלב 11

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

    שלב 12

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