Get Adobe Flash player
דף הבית מודל התיבה מודל התיבה

כל אלמנט HTML המכיל בתוכו מידע (טקסט, תמונות וכו'), תופס "שטח" על המסך.

שטח זה ניתן לתיחום ואפשר להחיל עליו הגדרות רבות. CSS מגדירה זאת כ-"מודל תיבה" (Box Model).

תגי ה-HTML הרלוונטיים לכך הם תג span, תג הפיסקה p, סדרת תגי הכותרת h1,h2... ואת תג המקטע div. להבנת המשמעות ראו בדוגמא הבאה.

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

<style text/css>
  .box {
           border: 2x solid #000055;
           background-color: #bbb;
           }
</style>
</head>
<body>
<h1 class="box" align="center">כותרת ממורכזת</h1>
<p class="box">טקסט בתוך תג פיסקה</p><br />
<span class="box">טקסט לשורה פשוטה</span>

התוצאה מראה שני דברים:

  • לכל אלמנט יש "שט"
  • יש הבדל בין התגים. תגי הפסקה נמתחים לרוחב המסך ותג ה-<span> משתנה לפי גודל הטקסט שבו.

כותרת ממורכזת

טקסט בתוך תג פיסקה


טקסט לשורה פשוטה
 

מבנה תיבת האלמנט

הדוגמא שלמעלה ממחישה את הרעיון הבסיסי האומר שאלמנט תופס שטח על המסך אך W3C הרחיבה את הנושא, ופיתחה את מה שזכה לכינוי "מודל התיבה" (Box Model).

מודל התיבה מגדיר מאפיינים התוחמים את איזור התוכן.

תיחום האזור התוכן מוגדר ע"י מידות אורך וגובה (width, height), רוחב השוליים סביב התוכן מוגדר ע"י המאפיין padding, המסגרת ע"י ה-border ומרווחים שבין התיבה לאלמנטים שסביבה ע"י המאפיין margin.

התמונה הבאה ממחישה את מבנה המודל

איך משתמשים במודל?

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

מתכון לסלט ירקות

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

הכותרת בדוגמא כתובה בתג <h1> והטקסט בשורה השנייה בתוך תג <p>. השונה בדוגמא מטקסטים רגילים אחרים הוא בעובדה שהם "נדחפו" פנימה, כל אחד במידה שונה.

ההזזה פנימה בוצעה ע"י הגדרת מאפיין margin ומאפיין padding המסומנים בתמונה הבאה באפור בהיר וכהה יותר. המסגרת (border) מסומנת בצבע אדום

מתכון לסלט ירקות

 

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

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

בפרקים הבאים נדון בדרך הכתיבה ובערכיהם.

מידות התיבה

גודל התיבה נקבע ע"י חיבור כל המידות. רוחב התיבה שנקבע הוא סכום כל המרכיבים: ה-margin משני צידיו, ה-padding משני צידיו, רוחב המסגרת (בשני צידיה) ומקטע התוכן.

חישוב גובה התיבה - זהה

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

הגדרת רוחב תיבה

אם יש צורך להכניס לדף בעל רוחב של 600px שלוש תיבות טקסט זהות - אחת ליד השנייה, הרוחב הכולל של כל אחת חייב להיות שווה ל-200px.

מאחר ולתיבה יש הגדרות עיצוב (שוליים וכו'), יש לקחת בחשבון את השיקולים הבאים:

אם צריך להשאיר מרווח של 5px מכל צד של התיבה, נגדיר זאת בשוליים החיצוניים - margin.

אם הגדרת העיצוב מחיבת מסגרת בעובי 2px משני צידי התיבה, נגדיר כך את ה-border

אם צריך להשאיר שוליים פנימיים של 10px משני צידי התוכן, נגדיר זאת זאת ב-padding

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

פעמיים 5px של ה-margin ובסה"כ 10px

פעמיים 2px של ה-border ובסה"כ 4px.

פעמיים 10px של ה-padding ובסה"כ 20px

סך כל "הבזבוזים" עומד על 34px. מאחר ורוחב התיבה המבוקש הוא 200px, כל מה שנותר - 166px, יוגדר עבור ה-width.

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

מידות אזור התוכן - width, height 

מתן מידות לאזור התוכן של התיבה נעשה ע"י המאפיינים width, height.

למאפיינים אלה יש ערכי מידה: פיקסלים (px), נקודות (pt), ס"מ (cm), מ"מ (mm), ו- em.

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

אל השיעור הבא