CSS 14 💻 box model

The CSS Box Model is a fundamental concept that describes how every HTML element is structured and displayed on a web page. Every element is essentially a rectangular box composed of four layers: content, padding, border, and margin.

---

The Four Layers of the Box Model

Layer	Description
Content	The actual space occupied by the element’s content (text, images, etc.)
Padding	The space between the content area and the border (inside the box)
Border	The line that surrounds the padding and content
Margin	The space between the element and its adjacent elements (outside the box)

---

Visual Representation

┌─────────────────────────────────────────────┐
│                   MARGIN                    │
│  ┌───────────────────────────────────────┐  │
│  │               BORDER                  │  │
│  │  ┌─────────────────────────────────┐  │  │
│  │  │            PADDING              │  │  │
│  │  │  ┌───────────────────────────┐  │  │  │
│  │  │  │         CONTENT           │  │  │  │
│  │  │  └───────────────────────────┘  │  │  │
│  │  └─────────────────────────────────┘  │  │
│  └───────────────────────────────────────┘  │
└─────────────────────────────────────────────┘

---

1. Content Area

The content area is where the actual content (text, images, videos) is displayed. Its size is controlled by the width and height properties.

.content {
    width: 200px;
    height: 100px;
}

---

2. Padding

The padding property creates space between the content and the border. It pushes the border outward, creating visual separation.

.padding {
    padding: 25px; /* All sides */
    padding: 10px 20px; /* Vertical | Horizontal */
    padding: 10px 20px 30px 40px; /* Top | Right | Bottom | Left */
}

/* Individual sides */
.padding-top { padding-top: 10px; }
.padding-right { padding-right: 20px; }
.padding-bottom { padding-bottom: 10px; }
.padding-left { padding-left: 20px; }

---

3. Border

The border property creates a line around the padding and content. It sits between the padding and the margin.

.border {
    border: 5px solid black; /* Width | Style | Color */
    border-width: 5px;
    border-style: solid; /* solid, dashed, dotted, double, etc. */
    border-color: black;
}

/* Individual sides */
.border-top { border-top: 2px solid red; }
.border-right { border-right: 2px dashed blue; }
.border-bottom { border-bottom: 2px dotted green; }
.border-left { border-left: 2px double orange; }

---

4. Margin

The margin property creates space between the element and its neighbors (outside the border).

.margin {
    margin: 10px; /* All sides */
    margin: 10px 20px; /* Vertical | Horizontal */
    margin: 10px 20px 30px 40px; /* Top | Right | Bottom | Left */
    margin: 0 auto; /* Centers block elements horizontally */
}

/* Individual sides */
.margin-top { margin-top: 10px; }
.margin-right { margin-right: 20px; }
.margin-bottom { margin-bottom: 10px; }
.margin-left { margin-left: 20px; }

---

The Standard CSS Box Model

In the standard box model, the total size of an element is calculated as:

Total Width  = width + padding-left + padding-right + border-left + border-right
Total Height = height + padding-top + padding-bottom + border-top + border-bottom

Example:

.box {
    width: 150px;
    height: 50px;
    margin: 10px;
    padding: 25px;
    border: 5px solid black;
}

Calculations:

Total Width  = 150 + 25 + 25 + 5 + 5 = 210px
Total Height = 50 + 25 + 25 + 5 + 5 = 110px

The margin is not included in the total size — it’s outside the element.

---

The Alternative CSS Box Model (box-sizing: border-box)

In the alternative box model, the width and height include the padding and border. The content area shrinks to accommodate them.

.box {
    box-sizing: border-box;
    width: 150px;
    height: 50px;
    padding: 25px;
    border: 5px solid black;
}

Calculations:

Total Width  = 150px (includes padding and border)
Total Height = 50px (includes padding and border)

Content Width  = 150 - 25 - 25 - 5 - 5 = 90px
Content Height = 50 - 25 - 25 - 5 - 5 = -10px (content shrinks further)

Best Practice: Apply box-sizing: border-box to all elements for more predictable sizing.

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

---

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Box Model</title>
    <style>
        /* ====== GLOBAL BOX SIZING ====== */
        *, *::before, *::after {
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        /* ====== BOX MODEL DEMO ====== */
        .boxmodel-demo {
            margin: 30px auto;
            max-width: 500px;
        }

        .boxmodel-margin {
            background: #d2cece;
            padding: 45px;
            border: 2px dashed #bbb;
            position: relative;
        }

        .boxmodel-margin::before {
            content: "MARGIN";
            position: absolute;
            top: 5px;
            left: 10px;
            font-size: 0.8rem;
            font-weight: bold;
            color: #666;
        }

        .boxmodel-border {
            background: #f3bc50;
            padding: 45px;
            position: relative;
            border: 2px solid #d4a017;
        }

        .boxmodel-border::before {
            content: "BORDER";
            position: absolute;
            top: 5px;
            left: 10px;
            font-size: 0.8rem;
            font-weight: bold;
            color: #8b6914;
        }

        .boxmodel-padding {
            background: #d2cece;
            padding: 45px;
            position: relative;
            border: 2px dashed #bbb;
        }

        .boxmodel-padding::before {
            content: "PADDING";
            position: absolute;
            top: 5px;
            left: 10px;
            font-size: 0.8rem;
            font-weight: bold;
            color: #666;
        }

        .boxmodel-content {
            background: white;
            padding: 20px;
            position: relative;
            border: 2px dashed #bbb;
        }

        .boxmodel-content::before {
            content: "CONTENT";
            position: absolute;
            top: 5px;
            left: 10px;
            font-size: 0.8rem;
            font-weight: bold;
            color: #007bff;
        }

        /* ====== SIZE COMPARISON ====== */
        .size-comparison {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
            margin: 20px 0;
        }

        .size-box {
            text-align: center;
        }

        .size-box .box {
            width: 150px;
            height: 50px;
            margin: 10px;
            padding: 25px;
            border: 5px solid black;
            background: #007bff;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .size-box .box.border-box {
            box-sizing: border-box;
            background: #28a745;
        }

        /* ====== INTERACTIVE BOX ====== */
        .interactive-box {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 5px solid #007bff;
            margin: 20px;
            background: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            transition: all 0.3s;
        }

        .interactive-box:hover {
            padding: 40px;
            border-width: 10px;
            margin: 30px;
            background: #ffc107;
        }

        /* ====== PADDING vs MARGIN VISUAL ====== */
        .visual-demo {
            background: #f8f9fa;
            padding: 20px;
            border: 2px solid #ddd;
            border-radius: 8px;
            margin: 10px 0;
        }

        .visual-demo .box-with-padding {
            background: #007bff;
            color: white;
            padding: 30px;
            border: 3px solid #0056b3;
            margin: 10px 0;
            border-radius: 4px;
        }

        .visual-demo .box-with-margin {
            background: #28a745;
            color: white;
            padding: 10px;
            border: 3px solid #1e7e34;
            margin: 30px 0;
            border-radius: 4px;
        }
    </style>
</head>
<body>

    <h1>The CSS Box Model</h1>

    <!-- ====== 1. BOX MODEL VISUAL ====== -->
    <section>
        <h2>1. Box Model Visualization</h2>

        <div class="boxmodel-demo">
            <div class="boxmodel-margin">
                <div class="boxmodel-border">
                    <div class="boxmodel-padding">
                        <div class="boxmodel-content">
                            <p style="margin: 0; text-align: center; font-weight: bold;">
                                Content
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="code-block">
            /* The four layers of the box model */
            .element {
                /* Content */
                width: 200px;
                height: 100px;

                /* Padding (space inside the border) */
                padding: 20px;

                /* Border (line around the element) */
                border: 5px solid black;

                /* Margin (space outside the border) */
                margin: 10px;
            }
        </div>
    </section>

    <!-- ====== 2. STANDARD VS BORDER-BOX ====== -->
    <section>
        <h2>2. Standard vs border-box</h2>

        <p>Both boxes below have <code>width: 150px; height: 50px; padding: 25px; border: 5px solid black;</code></p>

        <div class="size-comparison">
            <div class="size-box">
                <h4>Standard Box Model</h4>
                <div class="box">
                    210 × 110
                </div>
                <p><small>Total: 150 + 25 + 25 + 5 + 5 = <strong>210px</strong></small></p>
            </div>

            <div class="size-box">
                <h4>border-box</h4>
                <div class="box border-box">
                    150 × 50
                </div>
                <p><small>Total: <strong>150px</strong> (includes padding + border)</small></p>
            </div>
        </div>

        <div class="code-block">
            /* Standard box model */
            .box {
                width: 150px;
                height: 50px;
                padding: 25px;
                border: 5px solid black;
                /* Total Width = 150 + 25 + 25 + 5 + 5 = 210px */
            }

            /* border-box model */
            .box {
                box-sizing: border-box;
                width: 150px;
                height: 50px;
                padding: 25px;
                border: 5px solid black;
                /* Total Width = 150px (includes padding + border) */
            }

            /* Apply to all elements (best practice) */
            *, *::before, *::after {
                box-sizing: border-box;
            }
        </div>
    </section>

    <!-- ====== 3. PADDING vs MARGIN ====== -->
    <section>
        <h2>3. Padding vs Margin</h2>

        <div class="visual-demo">
            <h4>Padding</h4>
            <div class="box-with-padding">
                This box has padding — space <strong>inside</strong> the border.
            </div>

            <h4>Margin</h4>
            <div class="box-with-margin">
                This box has margin — space <strong>outside</strong> the border.
            </div>
        </div>

        <div class="code-block">
            /* Padding: space inside the border */
            .padding-box {
                padding: 30px;
            }

            /* Margin: space outside the border */
            .margin-box {
                margin: 30px;
            }
        </div>
    </section>

    <!-- ====== 4. INTERACTIVE BOX ====== -->
    <section>
        <h2>4. Interactive Box</h2>
        <p>Hover over the box to see padding, border, and margin change.</p>

        <div style="display: flex; justify-content: center;">
            <div class="interactive-box">
                Hover Me
            </div>
        </div>

        <div class="code-block">
            .interactive-box {
                width: 200px;
                height: 100px;
                padding: 20px;
                border: 5px solid #007bff;
                margin: 20px;
                transition: all 0.3s;
            }

            .interactive-box:hover {
                padding: 40px;
                border-width: 10px;
                margin: 30px;
                background: #ffc107;
            }
        </div>
    </section>

    <!-- ====== 5. REFERENCE TABLES ====== -->
    <section>
        <h2>5. Reference Tables</h2>

        <h3>Box Model Properties</h3>
        <table class="reference-table">
            <tr>
                <th>Property</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>width</code></td>
                <td>Width of the content area</td>
                <td><code>width: 200px;</code></td>
            </tr>
            <tr>
                <td><code>height</code></td>
                <td>Height of the content area</td>
                <td><code>height: 100px;</code></td>
            </tr>
            <tr>
                <td><code>padding</code></td>
                <td>Space between content and border</td>
                <td><code>padding: 20px;</code></td>
            </tr>
            <tr>
                <td><code>border</code></td>
                <td>Line around the padding and content</td>
                <td><code>border: 2px solid black;</code></td>
            </tr>
            <tr>
                <td><code>margin</code></td>
                <td>Space outside the border</td>
                <td><code>margin: 10px;</code></td>
            </tr>
            <tr>
                <td><code>box-sizing</code></td>
                <td>How width/height are calculated</td>
                <td><code>box-sizing: border-box;</code></td>
            </tr>
        </table>

        <h3>Border Styles</h3>
        <table class="reference-table">
            <tr>
                <th>Style</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>solid</code></td>
                <td>Single solid line</td>
                <td><code>border: 2px solid black;</code></td>
            </tr>
            <tr>
                <td><code>dashed</code></td>
                <td>Dashed line</td>
                <td><code>border: 2px dashed black;</code></td>
            </tr>
            <tr>
                <td><code>dotted</code></td>
                <td>Dotted line</td>
                <td><code>border: 2px dotted black;</code></td>
            </tr>
            <tr>
                <td><code>double</code></td>
                <td>Double line</td>
                <td><code>border: 4px double black;</code></td>
            </tr>
            <tr>
                <td><code>groove</code></td>
                <td>3D grooved effect</td>
                <td><code>border: 4px groove gray;</code></td>
            </tr>
            <tr>
                <td><code>ridge</code></td>
                <td>3D ridged effect</td>
                <td><code>border: 4px ridge gray;</code></td>
            </tr>
            <tr>
                <td><code>inset</code></td>
                <td>3D inset effect</td>
                <td><code>border: 4px inset gray;</code></td>
            </tr>
            <tr>
                <td><code>outset</code></td>
                <td>3D outset effect</td>
                <td><code>border: 4px outset gray;</code></td>
            </tr>
            <tr>
                <td><code>none</code></td>
                <td>No border</td>
                <td><code>border: none;</code></td>
            </tr>
        </table>

        <h3>Shorthand Order</h3>
        <table class="reference-table">
            <tr>
                <th>Property</th>
                <th>1 Value</th>
                <th>2 Values</th>
                <th>3 Values</th>
                <th>4 Values</th>
            </tr>
            <tr>
                <td><code>padding</code></td>
                <td>All sides</td>
                <td>Vertical | Horizontal</td>
                <td>Top | Horizontal | Bottom</td>
                <td>Top | Right | Bottom | Left</td>
            </tr>
            <tr>
                <td><code>margin</code></td>
                <td>All sides</td>
                <td>Vertical | Horizontal</td>
                <td>Top | Horizontal | Bottom</td>
                <td>Top | Right | Bottom | Left</td>
            </tr>
            <tr>
                <td><code>border-width</code></td>
                <td>All sides</td>
                <td>Vertical | Horizontal</td>
                <td>Top | Horizontal | Bottom</td>
                <td>Top | Right | Bottom | Left</td>
            </tr>
        </table>
    </section>

    <!-- ====== BEST PRACTICES ====== -->
    <section>
        <h2>6. Best Practices</h2>

        <div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
            <h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
            <ul>
                <li>Always use <code>box-sizing: border-box</code> for predictable sizing</li>
                <li>Use <code>margin: 0 auto</code> to center block elements</li>
                <li>Use padding for internal spacing (inside the border)</li>
                <li>Use margin for external spacing (between elements)</li>
                <li>Use shorthand properties to write cleaner code</li>
            </ul>
        </div>

        <div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
            <h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
            <ul>
                <li>Don't forget that padding and border add to the total size in the standard model</li>
                <li>Don't use margin for internal spacing (use padding instead)</li>
                <li>Don't use padding for external spacing (use margin instead)</li>
                <li>Don't mix up margin collapse with padding</li>
            </ul>
        </div>
    </section>

</body>
</html>

---

Quick Reference

Layer	Property	Description
Content	width, height	The actual content area
Padding	padding	Space inside the border
Border	border	Line around the element
Margin	margin	Space outside the border

---

Box Model Calculation

Model	Total Width	Content Width
Standard	width + padding + border	width
border-box	width	width - padding - border

---

Best Practices

✅ Do This:

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

/* Center a block element */
.container {
    width: 80%;
    margin: 0 auto;
}

/* Use padding for internal spacing */
.card {
    padding: 20px;
}

/* Use margin for external spacing */
.card {
    margin-bottom: 20px;
}

❌ Don’t Do This:

/* Don't forget box-sizing */
.box {
    width: 100%;
    padding: 20px;
    border: 5px solid black;
    /* Total width will exceed 100%! */
}

/* Don't use margin for internal spacing */
.card {
    margin: 20px; /* Creates space outside, not inside */
}

/* Don't use padding for external spacing */
.card {
    padding: 20px; /* Creates space inside, not outside */
}

---

Pro Tip: The box model is one of the most important concepts in CSS. Understanding how width, padding, border, and margin interact is crucial for building layouts. Always use box-sizing: border-box to make sizing more intuitive. Remember: padding is inside the border, margin is outside — they are not interchangeable!

---

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!