CSS

מודל הקופסה (Box Model)

מהו Box Model?

כל אלמנט ב-HTML הוא "קופסה" המורכבת מארבעה חלקים:

┌─────────────────────────────────────────┐
│                MARGIN                   │
│   ┌─────────────────────────────────┐   │
│   │            BORDER               │   │
│   │   ┌─────────────────────────┐   │   │
│   │   │        PADDING          │   │   │
│   │   │   ┌─────────────────┐   │   │   │
│   │   │   │    CONTENT      │   │   │   │
│   │   │   │   (תוכן)        │   │   │   │
│   │   │   └─────────────────┘   │   │   │
│   │   │                         │   │   │
│   │   └─────────────────────────┘   │   │
│   │                                 │   │
│   └─────────────────────────────────┘   │
│                                         │
└─────────────────────────────────────────┘

Width & Height (רוחב וגובה)

הגדרה בסיסית

.box {
    width: 300px;
    height: 200px;
}

יחידות

.box {
    width: 300px;        /* פיקסלים */
    width: 50%;          /* אחוז מההורה */
    width: 100vw;        /* רוחב החלון */
    width: auto;         /* אוטומטי (ברירת מחדל) */
}

min/max

.box {
    width: 100%;
    min-width: 200px;    /* לא יקטן מזה */
    max-width: 800px;    /* לא יגדל מזה */

    height: auto;
    min-height: 100px;
    max-height: 500px;
}

Padding (ריווח פנימי)

ארבע צדדים בנפרד

.box {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

קיצור (shorthand)

.box {
    /* כל הצדדים */
    padding: 20px;

    /* אנכי | אופקי */
    padding: 10px 20px;

    /* למעלה | אופקי | למטה */
    padding: 10px 20px 15px;

    /* למעלה | ימין | למטה | שמאל (כיוון השעון) */
    padding: 10px 20px 15px 25px;
}

Border (גבול)

תכונות נפרדות

.box {
    border-width: 2px;
    border-style: solid;
    border-color: black;
}

סגנונות גבול

.box {
    border-style: solid;   /* קו רציף */
    border-style: dashed;  /* מקווקו */
    border-style: dotted;  /* נקודות */
    border-style: double;  /* כפול */
    border-style: groove;  /* חריץ */
    border-style: ridge;   /* בליטה */
    border-style: inset;   /* שקוע */
    border-style: outset;  /* בולט */
    border-style: none;    /* ללא */
}

קיצור

.box {
    /* width style color */
    border: 2px solid #333;
}

צד ספציפי

.box {
    border-top: 2px solid red;
    border-right: 1px dashed blue;
    border-bottom: 3px double green;
    border-left: none;
}

border-radius (פינות מעוגלות)

.box {
    border-radius: 10px;           /* כל הפינות */
    border-radius: 50%;            /* עיגול מושלם */
    border-radius: 10px 20px;      /* אלכסוני */
    border-radius: 10px 20px 30px 40px; /* כל פינה */
}

/* פינות ספציפיות */
.box {
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 20px;
}

Margin (ריווח חיצוני)

תחביר זהה ל-padding

.box {
    margin: 20px;
    margin: 10px 20px;
    margin: 10px 20px 15px 25px;

    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
}

מרכוז אופקי

.box {
    width: 600px;
    margin: 0 auto; /* מרכז אופקית */
}

Margin Collapse

כשיש שני margins אנכיים סמוכים, הם מתמזגים (הגדול גובר):

.box1 {
    margin-bottom: 30px;
}
.box2 {
    margin-top: 20px;
}
/* המרווח ביניהם יהיה 30px, לא 50px! */

ערכים שליליים

.box {
    margin-top: -10px; /* מזיז למעלה */
    margin-left: -20px; /* מזיז שמאלה */
}

box-sizing

content-box (ברירת מחדל)

.box {
    box-sizing: content-box;
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}
/* רוחב סה"כ: 300 + 40 + 10 = 350px */

border-box (מומלץ!)

.box {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}
/* רוחב סה"כ: 300px (padding ו-border בפנים) */

ריסט גלובלי מומלץ

*, *::before, *::after {
    box-sizing: border-box;
}

Overflow (גלישה)

מה קורה כשהתוכן גדול מהקופסה?

.box {
    width: 200px;
    height: 100px;
    overflow: visible;  /* ברירת מחדל - גולש */
    overflow: hidden;   /* מוסתר */
    overflow: scroll;   /* תמיד סרגל גלילה */
    overflow: auto;     /* סרגל גלילה רק כשצריך */
}

/* התנהגות נפרדת לכל ציר */
.box {
    overflow-x: hidden;
    overflow-y: auto;
}

Outline

דומה ל-border אבל לא תופס מקום:

.button {
    outline: none; /* להסרה (למשל על כפתורים) */
}

.button:focus {
    outline: 2px solid blue;
    outline-offset: 2px;
}

💡 בניגוד ל-border, outline לא משפיע על ה-box model

דוגמה מעשית

/* ריסט בסיסי */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* כרטיס */
.card {
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
    padding: 24px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.card-content {
    overflow: auto;
    max-height: 300px;
}

סיכום

הבא: פריסה ➡️