Get Adobe Flash player
דף הבית מודל התיבה מאפייני השוליים

מאפייני margin

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

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

את רוחב השוליים מציינים בפיקסלים, יחידות מידה אחרות (pt ,em, ס"מ, מ"מ וכו') או באחוזים (מרוחב האלמנט בו נמצאת התיבה).

ערך נוסף הוא auto, וגודלו נקבע ע"פ הדפדפן בו הוא מוצג.

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

ערכי המאפיין לצדדים נפרדים
margin-top: 100px;
margin-bottom: 100px;
margin-right: 50px;
margin-left: 50px;
ערכי המאפיין בשורה אחת

שורת הוראה למידות עצמאיות לכל צד:

  • margin: 10px 15px 0 40px;

סדר הערכים הוא ע"פ כיוון תנועת השעון: השוליים העליונים הם ברוחב 10px הימנים ברוחב 15px התחתיים - 0 (ללא שוליים) והשמאלי 40px.

אפשרויות כתיבה נוספות הן:

  • margin: 10px 15px 40px;

במצב זה, הערך הראשון הוא של השוליים העליונים, הערך האמצעי הוא לימין ושמאל, והערך האחרון לשוליים התחתיים 

  • margin: 10px 20px;

במצב זה, הערך הראשון הוא של השוליים העליונים והתחתיים, והערך השני מתייחס לימין ולשמאל.

  • margin: 10px;

ובמצב זה, כל הצדדים מקבלים את אותו הערך

מאפייני padding

השוליים שסביב תוכן התיבה נקראים pardding. השוליים מקבלים את צבע הרקע שנקבע לתיבה (צבע הרקע חל על התוכן ועל שוליים אלו).

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

את רוחב השוליים מציינים בפיקסלים, יחידות מידה אחרות (pt ,em, ס"מ, מ"מ וכו') או באחוזים (מרוחב האלמנט בו נמצאת התיבה).

ערכי המאפיין לצדדים נפרדים
padding-top: 100px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 50px;
ערכי המאפיין בשורה אחת

שורת הוראה למידות עצמאיות לכל צד:

  • padding: 10px 15px 0 40px;

סדר הערכים הוא ע"פ כיוון תמועת השעון: השוליים העליונים הם ברוחב 10px הימנים ברוחב 15px התחתיים - 0 (ללא שוליים) והשמאלי 40px.

אפשרויות כתיבה נוספות הן:

  • padding: 10px 15px 40px;

במצב זה, הערך הראשון הוא של השוליים העליונים, הערך האמצעי הוא לימין ושמאל, והערך האחרון לשוליים התחתיים

  • padding: 10px 20px;

במצב זה, הערך הראשון הוא של השוליים העליונים והתחתיים, והערך השני מתייחס לימין ולשמאל.

  • padding: 10px;

ובמצב זה, כל הצדדים מקבלים את אותו הערך

אל השיעור הקודם