המדריך לריפוד (Padding) אלמנטים ב - CSS

ריפוד כחלק ממודל הקופסא

מודל הקופסא ב - CSS בא לתאר אזורים שונים בתוך הקופסא הדמיונית הסובבת כל אלמנט בעץ המסמך שלנו. בעזרת CSS ביכולתנו להשפיע על המראה של האזורים השונים סביב האלמנט. אזורים אלה מתוארים באיור הבא:

Ilustration of CSS Box Model

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

הגדרת עובי הריפוד

בניגוד לגבולות או למיתאר לריפוד (Padding) אין קו תוחם נראה שאת סגנונו או צבעו ניתן לעצב. מה שכן אפשר לעשות בעזרת CSS הוא לקבוע מה יהיה עובי הריפוד. נעשה זאת בעזרת התכונה padding ותכונות ה - padding האחרות המופיעות בטבלה שבתחתית עמוד  זה.

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

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

כתיב מקוצר להגדרת עובי הריפוד לפי הסדר הבא: ריפוד עליון, ימני, תחתון, שמאלי
img{padding:1px 3px 2px 4px}

הגדרת עובי הריפוד העליונים בסנטימטרים
p{padding-top:1cm}

הגדרת עובי הריפוד הימני בפיקסלים
div{padding-right:10px}

הגדרת עובי הריפוד התחתון באחוזים
p{padding-bottom:6%}

הגדרת עובי הריפוד השמאלי
p{padding-left:2cm}


ריכוז כל התכונות לעיצוב ריפוד

תכונה הסבר
padding מאפשר להגדיר את כל תכונות שטח הריפוד באלמנט במשפט CSS אחד.
padding-bottom להגדרת שטח הריפוד התחתון של אלמנט.
padding-left להגדרת שטח הריפוד השמאלי של אלמנט.
padding-right להגדרת שטח הריפוד הימני של אלמנט.
padding-top להגדרת שטח הריפוד העליון של אלמנט.

 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש