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

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 39 מתוך 76.

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

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

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

selector {
    box-sizing: value;
}

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

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;
}

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

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

אתגר

קל

נתון לך מסמך HTML עם שתי חלוקות (<div>), שלכל אחת מהן מחלקה שונה. המשימה שלך היא להשתמש במאפיין box-sizing כדי לשלוט באופן שבו מחושבים הרוחב והגובה של הרכיבים האלה. פעל לפי השלבים הבאים:

כתוב כלל CSS שפונה לרכיב <div> עם המחלקה <strong>content-box-div</strong>. הגדר את width ל-300px, את height ל-200px, את padding ל-20px, את border ל-5px solid blue, ואת box-sizing ל-content-box.
כתוב כלל CSS שפונה לרכיב <div> עם המחלקה <strong>border-box-div</strong>. הגדר את width ל-300px, את height ל-200px, את padding ל-20px, את border ל-5px solid red, ואת box-sizing ל-border-box.

נסו בעצמכם

<html>
<head>
    <title>Box Sizing</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="content-box-div">This is a div with content-box.</div>
    <div class="border-box-div">This is a div with border-box.</div>
</body>
</html>