{ "$schema": "../schemas/code-crispies-module-schema.json", "id": "box-model", "title": "CSS Box Model", "description": "Master the fundamental principles of space management in web design through the CSS box model. This module explores how content, padding, borders, and margins combine to create layout structures that are both visually appealing and structurally sound.", "difficulty": "beginner", "lessons": [ { "id": "box-model-1", "title": "Padding", "description": "Every element in CSS is a box with four layers: content, padding, border, and margin. Padding creates breathing room between your content and the box's edge.

Without padding, text presses against borders awkwardly. Padding makes content readable and visually balanced.

.card {\n  padding: 1rem;\n}
", "task": "This profile card looks cramped. Add padding: 1rem to .card so the text has room to breathe.", "previewHTML": "

Sarah Chen

Frontend Developer

", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }", "sandboxCSS": "", "codePrefix": ".card {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "padding: 1rem;", "previewContainer": "preview-area", "validations": [ { "type": "property_value", "value": { "property": "padding", "expected": "1rem" }, "message": "Which property adds space between an element's content and its border?" } ] }, { "id": "box-model-2", "title": "Borders", "description": "Borders create visual boundaries around elements. The border shorthand takes three values: width, style, and color.

Common styles: solid, dashed, dotted, none", "task": "Add a subtle left accent to the card with border-left: 4px solid steelblue.", "previewHTML": "

Sarah Chen

Frontend Developer

", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }", "sandboxCSS": "", "codePrefix": ".card {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "border-left: 4px solid steelblue;", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "border-left:\\s*4px\\s+solid\\s+steelblue", "message": "Use the border-left shorthand with width, style, and color values", "options": { "caseSensitive": false } } ] }, { "id": "box-model-3", "title": "Margins", "description": "Margins create space outside the element, separating it from neighbors. While padding pushes content inward, margins push other elements away.", "task": "Add space between these two profile cards with margin-bottom: 1rem on .card.", "previewHTML": "

Sarah Chen

Frontend Developer

Alex Rivera

UX Designer

", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; border-left: 4px solid steelblue; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }", "sandboxCSS": "", "codePrefix": ".card {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "margin-bottom: 1rem;", "previewContainer": "preview-area", "validations": [ { "type": "property_value", "value": { "property": "margin-bottom", "expected": "1rem" }, "message": "Which property creates space below an element, pushing neighbors away?" } ] }, { "id": "box-model-4", "title": "Box Sizing", "description": "By default, width only sets the content width. Padding and borders add to the total. This causes layout headaches.

box-sizing: border-box includes padding and border in the width, making sizing predictable. Most developers apply this to all elements.", "task": "Both cards have width: 200px. The left uses default sizing (content-box), making it wider than expected. Fix the right card with box-sizing: border-box.", "previewHTML": "
Content-box
Border-box
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .demo { display: flex; gap: 1rem; } .card { width: 200px; padding: 1rem; border: 4px solid steelblue; background: white; border-radius: 8px; }", "sandboxCSS": "", "codePrefix": ".fix {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "box-sizing: border-box;", "previewContainer": "preview-area", "validations": [ { "type": "property_value", "value": { "property": "box-sizing", "expected": "border-box" }, "message": "Which box-sizing value includes padding and border in the element's total width?" } ] }, { "id": "box-model-5", "title": "Padding Shorthand", "description": "Padding accepts 1-4 values:
• 1 value: all sides
• 2 values: vertical | horizontal
• 4 values: top | right | bottom | left", "task": "This button needs more horizontal space than vertical. Set padding: 8px 1rem (8px top/bottom, 1rem left/right).", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .btn { background: steelblue; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; }", "sandboxCSS": "", "codePrefix": ".btn {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "padding: 8px 1rem;", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "padding:\\s*8px\\s+1rem", "message": "Use the padding shorthand with two values: vertical then horizontal", "options": { "caseSensitive": false } } ] }, { "id": "box-model-6", "title": "Margin Shorthand", "description": "Margin uses the same shorthand pattern as padding. A common pattern is centering block elements horizontally with margin: 0 auto.", "task": "Center this card horizontally. Set margin: 0 auto to auto-calculate equal left/right margins.", "previewHTML": "

Sarah Chen

Frontend Developer

", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { width: 250px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; border-left: 4px solid steelblue; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }", "sandboxCSS": "", "codePrefix": ".card {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "margin: 0 auto;", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "margin:\\s*0\\s+auto", "message": "Use margin with a keyword that auto-calculates equal left and right spacing", "options": { "caseSensitive": false } } ] }, { "id": "box-model-7", "title": "Border Radius", "description": "While not part of the classic box model, border-radius rounds the corners of an element's border box. Use 50% on a square element to create a circle.", "task": "Make the avatar image circular with border-radius: 50%.", "previewHTML": "
\"Avatar\"

Sarah Chen

Frontend Developer

", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem; text-align: center; } .avatar { width: 80px; height: 80px; background: #ddd; margin-bottom: 8px; } .card h3 { margin: 0 0 4px; } .card p { margin: 0; color: #666; }", "sandboxCSS": "", "codePrefix": ".avatar {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "border-radius: 50%;", "previewContainer": "preview-area", "validations": [ { "type": "property_value", "value": { "property": "border-radius", "expected": "50%" }, "message": "Which border-radius percentage creates a perfect circle from a square element?" } ] }, { "id": "box-model-8", "title": "Complete Card", "description": "Let's combine everything. This notification card needs styling to look polished.", "task": "Style the notification: add padding: 1rem, border-left: 4px solid coral, and border-radius: 4px.", "previewHTML": "
New message

You have 3 unread notifications

", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .alert { background: seashell; } .alert strong { color: coral; } .alert p { margin: 4px 0 0; color: #666; }", "sandboxCSS": "", "codePrefix": ".alert {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "padding: 1rem;\n border-left: 4px solid coral;\n border-radius: 4px;", "previewContainer": "preview-area", "validations": [ { "type": "property_value", "value": { "property": "padding", "expected": "1rem" }, "message": "Add inner spacing to the notification card" }, { "type": "regex", "value": "border-left:\\s*4px\\s+solid\\s+coral", "message": "Add a left border accent using the border-left shorthand", "options": { "caseSensitive": false } }, { "type": "property_value", "value": { "property": "border-radius", "expected": "4px" }, "message": "Round the corners slightly with border-radius" } ] } ] }