1.2 מודל הקופסה פתרון

פתרון - מודל הקופסה¶

פתרון תרגיל 1¶

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Box Model Experiment</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box-small">Small padding and border</div>
    <div class="box-medium">Medium padding, border and margin</div>
    <div class="box-large">Large padding, border and margin</div>
</body>
</html>

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

.box-small {
    padding: 10px;
    border: 1px solid black;
    margin: 0;
    background-color: #e8f5e9;
}

.box-medium {
    padding: 30px;
    border: 3px dashed blue;
    margin: 20px;
    background-color: #e3f2fd;
}

.box-large {
    padding: 50px;
    border: 5px double red;
    margin: 40px;
    background-color: #fce4ec;
}

פתרון תרגיל 2¶

<div class="outer">
    <div class="inner">Inner centered box</div>
</div>

* {
    box-sizing: border-box;
}

.outer {
    max-width: 500px;
    height: 300px;
    background-color: #3498db;
    margin: 0 auto;
    padding: 20px;
}

.inner {
    width: 300px;
    height: 100px;
    background-color: #e74c3c;
    margin: 0 auto;
    color: white;
    text-align: center;
    line-height: 100px;
}

כשמשתמשים ב-max-width: 500px במקום width: 500px, ה-div החיצוני יתכווץ כשחלון הדפדפן קטן מ-500px. עם width: 500px הרוחב קבוע ויופיע פס גלילה אופקי.

פתרון תרגיל 3¶

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Product Card</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <img class="card-image" src="https://via.placeholder.com/300x200" alt="Product">
        <div class="card-content">
            <h2 class="card-title">Wireless Headphones</h2>
            <p class="card-description">High quality wireless headphones with noise cancellation and 30 hour battery life.</p>
            <p class="card-price">$149.99</p>
            <button class="card-button">Add to Cart</button>
        </div>
    </div>
</body>
</html>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    padding: 40px;
}

.card {
    max-width: 350px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 12px;
    margin: 20px auto;
    overflow: hidden;
}

.card-image {
    width: 100%;
    height: auto;
    display: block;
}

.card-content {
    padding: 20px;
}

.card-title {
    margin-bottom: 10px;
    color: #333;
}

.card-description {
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
}

.card-price {
    font-size: 24px;
    font-weight: bold;
    color: #27ae60;
    margin-bottom: 15px;
}

.card-button {
    width: 100%;
    padding: 12px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}

פתרון תרגיל 4¶

<div class="container">
    <div class="box box-1">Box 1 (margin-bottom: 30px)</div>
    <div class="box box-2">Box 2 (margin-top: 20px, margin-bottom: 40px)</div>
    <div class="box box-3">Box 3 (margin-top: 25px)</div>
</div>

ללא תיקון (margin collapse קורה):

.box {
    padding: 20px;
    background-color: #ddd;
}

.box-1 {
    margin-bottom: 30px;
}

.box-2 {
    margin-top: 20px;    /* collapses with box-1's margin-bottom */
    margin-bottom: 40px;
}

.box-3 {
    margin-top: 25px;    /* collapses with box-2's margin-bottom */
}

המרחק בין box-1 ל-box-2 הוא 30px (לא 50px) כי 30 > 20
המרחק בין box-2 ל-box-3 הוא 40px (לא 65px) כי 40 > 25

תיקון עם Flexbox:

.container {
    display: flex;
    flex-direction: column;
}

.box {
    padding: 20px;
    background-color: #ddd;
}

.box-1 {
    margin-bottom: 30px;
}

.box-2 {
    margin-top: 20px;
    margin-bottom: 40px;
}

.box-3 {
    margin-top: 25px;
}

עכשיו המרווחים מתחברים: 50px בין 1 ל-2, ו-65px בין 2 ל-3. ב-Flexbox אין margin collapse.

פתרון תרגיל 5¶

<div class="overflow-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

.overflow-box {
    width: 300px;
    height: 150px;
    border: 2px solid #333;
    padding: 10px;

    /* change this to test each value */
    overflow: auto;
}

visible - הטקסט ייראה מחוץ לקופסה, חופף על אלמנטים מתחת
hidden - הטקסט נחתך, אין דרך לראות את השאר
scroll - מופיעים פסי גלילה תמיד (גם אופקי אם לא צריך)
auto - פס גלילה אנכי מופיע רק כי הטקסט ארוך, אופקי לא מופיע כי אין צורך

פתרון תרגיל 6¶

שאלה א: content-box
- רוחב תוכן: 200px
- padding: 15px * 2 = 30px
- border: 5px * 2 = 10px
- רוחב הקופסה (בלי margin): 240px
- עם margin: 240px + 10px * 2 = 260px מקום שתופס בדף

שאלה ב: border-box
- רוחב הקופסה (כולל padding ו-border): 200px
- עם margin: 200px + 10px * 2 = 220px מקום שתופס בדף
- רוחב התוכן: 200 - 30 - 10 = 160px

שאלה ג: border-box
- גובה הקופסה: 100px (כולל padding ו-border)
- padding אנכי: 20px * 2 = 40px (הערך הראשון ב-20px 10px הוא top/bottom)
- border אנכי: 3px * 2 = 6px
- גובה התוכן: 100 - 40 - 6 = 54px
- עם margin אנכי: 100 + 15px * 2 = 130px מקום שתופס בדף

שאלה ד: margin collapse
- margin-bottom: 25px, margin-top: 35px
- המרחק בפועל: 35px (הגדול מבין השניים)

פתרון תרגיל 7¶

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Page Layout</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1 class="header-title">My Website</h1>
        </header>

        <main class="content">
            <div class="card">
                <h2 class="card-title">Card 1</h2>
                <p class="card-text">Some description text for the first card.</p>
            </div>
            <div class="card">
                <h2 class="card-title">Card 2</h2>
                <p class="card-text">Some description text for the second card.</p>
            </div>
            <div class="card">
                <h2 class="card-title">Card 3</h2>
                <p class="card-text">Some description text for the third card.</p>
            </div>
        </main>

        <footer class="footer">
            <p class="footer-text">Copyright 2026. All rights reserved.</p>
        </footer>
    </div>
</body>
</html>

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

body {
    font-family: Arial, sans-serif;
    background-color: #ecf0f1;
}

.container {
    max-width: 960px;
    margin: 0 auto;
}

.header {
    background-color: #2c3e50;
    color: white;
    padding: 20px 30px;
}

.header-title {
    font-size: 24px;
}

.content {
    padding: 30px 20px;
}

.card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.card-title {
    color: #333;
    margin-bottom: 10px;
}

.card-text {
    color: #666;
    line-height: 1.6;
}

.footer {
    background-color: #2c3e50;
    color: #bdc3c7;
    padding: 20px 30px;
    text-align: center;
}