{ "$schema": "../../schemas/code-crispies-module-schema.json", "id": "box-model", "title": "CSS Box Model", "description": "Beherrsche die Grundprinzipien der Raumverwaltung im Webdesign durch das CSS Box-Modell.", "difficulty": "beginner", "lessons": [ { "id": "box-model-1", "title": "Box-Modell Komponenten", "description": "Das CSS Box-Modell besteht aus vier konzentrischen Schichten: Inhalt (innerste), Padding, Border und Margin (äußerste). Zu verstehen, wie diese Komponenten zusammenwirken, ist essentiell für präzise Layout-Kontrolle.", "task": "Setze padding auf 1rem, um Abstand zwischen Inhalt und Rahmen zu schaffen.", "previewHTML": "
Box-Modell Komponenten
", "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": "Setze padding: 1rem" } ] }, { "id": "box-model-2", "title": "Rahmen hinzufügen", "description": "Rahmen umranden ein Element und schaffen visuelle Trennung. Die border-Kurzschreibweise akzeptiert drei Werte: Breite, Stil und Farbe.", "task": "Setze border auf 2px solid darkslategray.", "previewHTML": "
Diese Box braucht einen Rahmen
", "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": "Setze border: 2px solid darkslategray", "options": { "caseSensitive": false } } ] }, { "id": "box-model-3", "title": "Außenabstände hinzufügen", "description": "Margins schaffen Abstand zwischen Elementen. Anders als Padding (das den inneren Abstand beeinflusst) existiert Margin außerhalb des Rahmens.", "task": "Setze margin auf 1rem, um Abstand zum benachbarten Element zu schaffen.", "previewHTML": "
Diese Box braucht Margins
Benachbartes 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": "Setze margin: 1rem" } ] }, { "id": "box-model-4", "title": "Box-Sizing: Border-Box", "description": "Die box-sizing Eigenschaft bestimmt, wie Elementdimensionen berechnet werden. 'content-box' (Standard) schließt Padding und Border aus, während 'border-box' sie einschließt.", "task": "Setze box-sizing auf border-box, damit Padding und Border in die Breite einbezogen werden.", "previewHTML": "
Content-box (Standard)
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": "Setze box-sizing: border-box" } ] }, { "id": "box-model-5", "title": "Margin-Kollaps", "description": "Wenn zwei vertikale Margins aufeinandertreffen, kollabieren sie zum größeren der beiden Werte statt zu addieren.", "task": "Setze margin-bottom auf 2rem. Der Abstand zwischen den Absätzen beträgt 2rem (nicht 3rem) durch Margin-Kollaps.", "previewHTML": "

Dieser Absatz hat einen Bottom-Margin.

Dieser Absatz hat einen Top-Margin von 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": "Setze margin-bottom: 2rem" } ] }, { "id": "box-model-6", "title": "Margin-Kurzschreibweise", "description": "Die Margin-Kurzschreibweise kann alle vier Seiten setzen. Zwei Werte setzen vertikale (oben/unten) und horizontale (links/rechts) Margins.", "task": "Setze margin auf 1rem 2rem für 1rem oben/unten und 2rem links/rechts.", "previewHTML": "
Diese Box braucht Margins: 1rem oben/unten, 2rem links/rechts
", "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": "Setze margin: 1rem 2rem", "options": { "caseSensitive": false } } ] }, { "id": "box-model-7", "title": "Padding-Kurzschreibweise", "description": "Wie Margin erlaubt Padding-Kurzschreibweise das Setzen aller Seiten. Ein einzelner Wert gilt für alle vier Seiten.", "task": "Setze padding auf 2rem für gleichmäßiges Padding.", "previewHTML": "
Diese Box braucht gleichmäßiges Padding
", "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: 2rem;", "previewContainer": "preview-area", "validations": [ { "type": "property_value", "value": { "property": "padding", "expected": "2rem" }, "message": "Setze padding: 2rem" } ] }, { "id": "box-model-8", "title": "Rahmen auf einzelnen Seiten", "description": "Für feinere Kontrolle können einzelne Seiten mit border-top, border-right, border-bottom oder border-left angesprochen werden.", "task": "Setze border-bottom auf 4px solid dodgerblue.", "previewHTML": "
Dieses Element braucht nur einen unteren Rahmen
", "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": "Setze border-bottom: 4px solid dodgerblue", "options": { "caseSensitive": false } } ] } ] }