{ "$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": "Box Model Components", "description": "The CSS box model consists of four concentric layers: content area (innermost), padding, border, and margin (outermost). Understanding how these components interact is essential for precise layout control.", "task": "Add padding: 1rem to .box to create space between its content and border.", "previewHTML": "
Box Model Components
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: lavender; border: 2px dashed slategray; }", "sandboxCSS": "", "codePrefix": ".box {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "padding: 1rem;", "previewContainer": "preview-area", "validations": [ { "type": "property_value", "value": { "property": "padding", "expected": "1rem" }, "message": "Set padding: 1rem" } ] }, { "id": "box-model-2", "title": "Adding Borders", "description": "Borders outline an element, creating visual separation from surrounding content. The border shorthand accepts three values: width, style, and color.", "task": "Add border: 2px solid darkslategray to .box.", "previewHTML": "
This box needs a border
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background-color: mintcream; padding: 1rem; }", "sandboxCSS": "", "codePrefix": ".box {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "border: 2px solid darkslategray;", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "border:\\s*2px\\s+solid\\s+darkslategray", "message": "Set border: 2px solid darkslategray", "options": { "caseSensitive": false } } ] }, { "id": "box-model-3", "title": "Adding Margins", "description": "Margins create space between elements, controlling how they relate to one another within a layout. Unlike padding (which affects internal spacing), margins exist outside the element's border.", "task": "Add margin: 1rem to .outer to create space between it and the adjacent element.", "previewHTML": "
This box needs margins
Adjacent element
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .outer { background-color: plum; padding: 1rem; border: 2px solid orchid; } .neighbor { background-color: lightblue; padding: 1rem; border: 2px solid steelblue; }", "sandboxCSS": "", "codePrefix": ".outer {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "margin: 1rem;", "previewContainer": "preview-area", "validations": [ { "type": "property_value", "value": { "property": "margin", "expected": "1rem" }, "message": "Set margin: 1rem" } ] }, { "id": "box-model-4", "title": "Box Sizing: Border-Box", "description": "The box-sizing property determines how element dimensions are calculated. The default content-box excludes padding and border from width/height, while border-box includes them, making layout calculations more intuitive.", "task": "Add box-sizing: border-box to .sized so padding and border are included in its width.", "previewHTML": "
Content-box (default)
Border-box
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .sizing-demo { display: flex; gap: 1rem; } .box { width: 200px; padding: 1rem; border: 4px solid teal; background: lightcyan; } .default { box-sizing: content-box; }", "sandboxCSS": "", "codePrefix": ".sized {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "box-sizing: border-box;", "previewContainer": "preview-area", "validations": [ { "type": "property_value", "value": { "property": "box-sizing", "expected": "border-box" }, "message": "Set box-sizing: border-box" } ] }, { "id": "box-model-5", "title": "Margin Collapse", "description": "When two vertical margins meet, they collapse to the larger value instead of adding up. Understanding this behavior is crucial for consistent vertical spacing.", "task": "Add margin-bottom: 2rem to .first. Notice the space between paragraphs equals 2rem (not 3rem) due to margin collapse.", "previewHTML": "

This paragraph has a bottom margin.

This paragraph has a top margin of 1rem.

", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .collapse-demo { border: 1px solid silver; padding: 8px; background: ghostwhite; } .second { margin-top: 1rem; background: linen; }", "sandboxCSS": "", "codePrefix": ".first {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "margin-bottom: 2rem;", "previewContainer": "preview-area", "validations": [ { "type": "property_value", "value": { "property": "margin-bottom", "expected": "2rem" }, "message": "Set margin-bottom: 2rem" } ] }, { "id": "box-model-6", "title": "Margin Shorthand Notation", "description": "The margin shorthand can set all four sides at once. Two values set vertical (top/bottom) and horizontal (left/right) margins respectively.", "task": "Add margin: 1rem 2rem to .spaced for 1rem top/bottom and 2rem left/right.", "previewHTML": "
This box needs margins: 1rem top/bottom, 2rem left/right
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .spaced { background-color: honeydew; border: 2px solid mediumseagreen; padding: 1rem; }", "sandboxCSS": "", "codePrefix": ".spaced {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "margin: 1rem 2rem;", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "margin:\\s*1rem\\s+2rem", "message": "Set margin: 1rem 2rem", "options": { "caseSensitive": false } } ] }, { "id": "box-model-7", "title": "Padding Shorthand Notation", "description": "Like margin, padding shorthand allows setting all sides at once. A single value applies to all four sides equally.", "task": "Add padding: 1.5rem to .padded to add equal padding on all sides.", "previewHTML": "
This box needs equal padding on all sides
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .padded { background-color: papayawhip; border: 2px solid orange; }", "sandboxCSS": "", "codePrefix": ".padded {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "padding: 1.5rem;", "previewContainer": "preview-area", "validations": [ { "type": "property_value", "value": { "property": "padding", "expected": "1.5rem" }, "message": "Set padding: 1.5rem" } ] }, { "id": "box-model-8", "title": "Border on Specific Sides", "description": "For granular control, you can target specific sides with border-top, border-right, border-bottom, or border-left.", "task": "Add border-bottom: 4px solid dodgerblue to .line.", "previewHTML": "
This element needs only a bottom border
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .line { padding: 1rem; background-color: aliceblue; }", "sandboxCSS": "", "codePrefix": ".line {\n ", "initialCode": "", "codeSuffix": "\n}", "solution": "border-bottom: 4px solid dodgerblue;", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "border-bottom:\\s*4px\\s+solid\\s+dodgerblue", "message": "Set border-bottom: 4px solid dodgerblue", "options": { "caseSensitive": false } } ] } ] }