יכול לעניין אתכם

מדריך CSS מספר 10 - גבולות

מאת: בקלות טכני

מדריך CSS מספר 11 - קו מתאר (Outline)

מאת: בקלות טכני

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

מאת: בקלות טכני

מדריך CSS מספר 14 - איך להחביא ולהציג אובייקטים
מאת: בקלות טכני

מדריך CSS מספר 15 - איך להשתמש בCSS float

מאת: בקלות טכני

דף הבית >> מדריכים >> מחשבים >> תכנות >> CSS >> מדריך CSS מספר 12 - איך לעשות מרווחים (Margins)

מחשבים

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

עקוב

15/08/2011 11:09:17
מאת: בקלות טכני
כתב מתחיל

דירוג:

(1מדרגים)

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

רמת קושי: מתקדמים

הוראות:

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

<html>
<head>
<style type='text/css'>
p
{
border-style:solid;
border-color:red;
}
p.margin
{
margin-top:50px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>

<body>
<p>Paragraph number 1</p>
<p class='margin'>Paragraph number 2 - with margins</p>
</body>

</html>

Paragraph number 1

Paragraph number 2 - with margins

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

פסקה אחת הגדרנו כברירת מחדל (ללא מרווחים) ופסקה שניה היא עם מרווחים.

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

margin:50px;

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

margin:30px 60px;

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

margin:30px 60px 90px;

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

margin:30px 60px 70px 90px;

מה שכתבנו בחוק הCSS הזה:

המרווח העליון הוא 30 פיקסלים.
המרווח הימני הוא 60 פיקסלים.
המרווח התחתון הוא 70 פיקסלים.
המרווח השמאלי הוא 90 פיקסלים.

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

טיפים

תוכלו להגדיר את המרווחים בפיקסלים, באחוזים או בסנטימטרים.

הוסף למועדפים שלחו לחבר הדפיסו את המדריך

ראיתם משהו שאהבתם? יש לכם שאלה? כתבו תגובה

אם לא בא לכם להשאיר תגובה דרך הפייסבוק:

מדריכים נוספים בנושא:

איך לכתוב קובץ CSS נכון (Best practices) - חלק ב'

איך לכתוב קובץ CSS נכון (Best practices) - חלק א'

מדריך CSS מספר 18 - איך לעצב אלמנטי HTML עם מאפיינים ספציפיים

מדריך CSS מספר 17 - איך להוסיף אפקטים מיוחדים לסלקטורים בעזרת פסאודו קלאסים (Pseudo-classes)

עוד מדריכים בנושא זה