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

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

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

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

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

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

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

איך לבחור את הצבעים המתאימים לאתר האינטרנט שלך.
מאת: בקלות טכני

איך לבחור ולקנות שם לאתר שלך (Domain name)
מאת: בקלות טכני

איך לעצב אתר בצורה יעילה.

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

איך לבחור את הצבעים המתאימים לאתר האינטרנט שלך.
מאת: בקלות טכני

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

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

דף הבית >> מדריכים >> מחשבים >> אינטרנט >> בניית אתרים >> מדריך CSS מספר 13 - איך להשתמש בPadding

מחשבים

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

עקוב

16/08/2011 11:13:27
מאת: בקלות טכני
כתב מתחיל

דירוג:

(0 מדרגים)

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

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

הוראות:

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

דוגמא לשימוש בPadding:

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

<body>
<p class='padding'>Paragraph with paddings.</p>
</body>

</html>

Paragraph with paddings.

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

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

padding:50px;

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

padding:30px 60px;

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

padding:30px 60px 90px;

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

padding:30px 60px 70px 90px;

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

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

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

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

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

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

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

איך לבחור את הצבעים המתאימים לאתר האינטרנט שלך.

איך לבחור ולקנות שם לאתר שלך (Domain name)

איך לבחור לוגו

איך לבחור את האיחסון (Hosting) שמתאים לך.

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