קביעת גודל הקופסה

ב־CSS, box-sizing היא מאפיין שקובע כיצד מחושבים הרוחב והגובה הכוללים של רכיב. כברירת מחדל, המאפיינים width ו־height כוללים רק את גודל התוכן ואינם מביאים בחשבון ריווח פנימי, גבולות או שוליים. עם זאת, באמצעות המאפיין box-sizing, אפשר לשנות את ההתנהגות הזאת ולגרום למאפיינים width ו־height לכלול גם את גדלי הריווח הפנימי והגבול.

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

הנה התחביר הבסיסי לשימוש במאפיין box-sizing:

selector {
    box-sizing: value;
}

value: התנהגות ה-box-sizing הרצויה, שיכולה להיות אחת מהאפשרויות הבאות:

• content-box: זהו ערך ברירת המחדל. המאפיינים width ו־height כוללים רק את גודל התוכן. ריפוד, גבולות ושוליים מתווספים מחוץ לרוחב ולגובה שצוינו.

• border-box: מאפייני width ו-height כוללים את הגדלים של התוכן, הריווח הפנימי והגבול. השוליים עדיין מתווספים מחוץ לרכיב.

לדוגמה:

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* התנהגות ברירת מחדל */
}

.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
}

בדוגמה הזו, לערך box-sizing של הרכיב <div> יש ערך content-box. פירוש הדבר הוא שהרוחב המוצג בפועל של <div> יהיה 300px (תוכן) + 40px (ריווח פנימי משמאל ומימין) + 10px (גבול משמאל ומימין) = 350px. הגובה יחושב באופן דומה.

לעומת זאת, לאלמנט עם המחלקה container יש ערך box-sizing של border-box. במקרה הזה, הערך שצוין עבור width, כלומר 400px, יכלול את התוכן, המרווח הפנימי והגבול. אזור התוכן בפועל יתכווץ כדי להכיל את המרווח הפנימי והגבול, והתוצאה תהיה רוחב תוכן של 400px - 60px (מרווח פנימי משמאל ומימין) - 20px (גבול משמאל ומימין) = 320px. הגובה יחושב באופן דומה.