הגדרת שוליים של אלמנטים בעזרת CSS

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

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

Ilustration of CSS Box Model

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


הגדרת עובי שוליים

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

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


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

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

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

הגדרת עובי השוליים התחתונים
p{margin-bottom:6px}

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


ריכוז כל התכונות לעיצוב שוליים

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

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