מודל הקופסה - Box Model

מבנה ה-Box Model ופריסת האלמנטים

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

1. שכבת ה-content (תוכן) - השכבה הפנימית ביותר שכוללת את האלמנט עצמו (טקסט, תמונה או כל אלמנט HTML באשר הוא).
2. שכבת ה-padding (ריפוד) - השכבה העוטפת את שכבת ה-content ויוצרת מרווח שקוף סביבו.
3. שכבת ה-border (גבול) - השכבה העוטפת את שכבת ה-padding ויוצרת גבול נראה (שאינו שקוף) סביבו.
4. שכבת ה-margin (שוליים) - השכבה העוטפת את שכבת ה-border ויוצרת שוליים חיצוניים שקופים מסביב לאובייקט.

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

קביעת הדרך לחישוב מידות אלמנט באמצעות box-sizing

ישנן דרכים שונות לתאר מידות (רוחב וגובה) של אלמנט. הדרכים האלו נקבעות באמצעות התכונה box-sizing.

התכונה box-sizing יכולה לקבל את הערכים הבאים:

• content-box - המידות (רוחב וגובה) מתייחסות לשכבת ה-content בלבד.
• border-box - המידות (רוחב וגובה) מתייחסות לשכבות content + padding + border יחד, ללא שכבת ה-margin.

ברירת המחדל של box-sizing היא אמנם content-box, אך זוהי הגדרה היסטורית בטרם הומצא מודל ה- border-box. אנו ממליצים לקבוע תמיד שערך התכונה box-sizing יהיה border-box, כיוון שאז יהיה קל יותר לעצב אלמנטים מקוננים (אחד בתוך השני) ואלמנטים שנמצאים בסמיכות וחולקים רוחב מסך משותף.

כך נקבע את התכונה box-sizing:

* {
	box-sizing:border-box;
}

התכונה הוגדרה לכל האלמנטים (הסימן * מסמן שההגדרה היא לכל האלמנטים). מומלץ למקם את ההגדרה הזו בתחילת קובץ ה-CSS.

השוואה בין content-box ל- border-box

נסתכל על הדוגמה הבאה:

.item {
	height:100px;
	width:100px;
	border:3px solid #ff0000;
	padding:10px;
	margin:5px;
}

בדוגמה זו קבענו את מידות האובייקט מהמחלקה item לרוחב 100 וגובה 100. כמו כן, הגדרנו לאובייקט הזה גבול (border) בעובי 3 פיקסלים בצבע אדום. קבענו לאובייקט ריווח padding בעובי 10 פיקסלים בין האובייקט לגבול האדום, וריווח margin בעובי 5 פיקסלים מחוץ לגבול.

אם קבענו כי box-sizing יוגדר כ- content-box, אז הרוחב והגובה יתייחסו לאלמנט עצמו בלבד. נחשב את הרוחב המלא של כל השכבות (הגובה מחושב באופן דומה): האלמנט item יהיה ברוחב 100 פיקסלים, סביבו מרווח ברוחב 10 פיקסלים מימין ועוד 10 פיקסלים משמאל, סביבם גבול בעובי 3 פיקסלים מימין ועוד 3 פיקסלים משמאל. סה"כ הרוחב הוא 126 פיקסל (בלי המרווח החיצוני margin).

אם קבענו כי box-sizing יוגדר כ- border-box, אז הרוחב והגובה יכללו גם את הגבול ואת הריווח בין האובייקט לגבול. נחשב את הרוחב של האלמנט עצמו ללא הריווחים והגבולות (הגובה מחושב באופן דומה): הרוחב הכולל הוא 100 פיקסלים, מתוכם 3 פיקסלים מימין ועוד 3 פיקסלים משמאל עבור הגבול, ועוד 10 פיקסלים מימין ו-10 פיקסלים משמאל עבור הריווח padding. נותר אם כך לאובייקט עצמו רוחב של 74 פיקסלים. המרווח החיצוני margin אינו נכלל בחישובים.

נשים לב: הרוחב של הגבול הוא 6 פיקסלים (3 מכל צד) והרוחב של הריווח (padding) הוא 20 פיקסלים (10 מכל צד). סה"כ, מדובר ב-26 פיקסלים של גבול וריווח (ללא ה-margin). אם קבענו ש- box-sizing יקבל את הערך content-box, אז רוחב האובייקט עצמו יהיה 100 ואילו הרוחב הכולל עם הגבול ועם ריווח ה-padding (ללא ה-margin) יהיה 126. אם קבענו ש- box-sizing  יקבל את הערך border-box, אז רוחב האובייקט עצמו יהיה 74 פיקסלים ואילו הרוחב הכולל עם הגבול ועם ריווח ה-padding (ללא ה- margin) יהיה 100 פיקסלים. זאת אומרת שאותם 26 פיקסלים שהוספנו לגבול ולריווח ה-padding ירדו מרוחבו של האובייקט עצמו.