Informatik · Klasse 8 · Web-Technologien: Eigene Inhalte gestalten · 2. Halbjahr

Box-Modell und Layout mit CSS

Die Schülerinnen und Schüler verstehen das CSS Box-Modell und nutzen es für einfache Layouts.

• KMK Bildungsstandards
• KMK: Sekundarstufe I - Strukturieren und Modellieren
• KMK: Sekundarstufe I - Implementieren

Über dieses Thema

Das CSS-Box-Modell stellt jedes HTML-Element als rechteckige Box dar, die aus vier Hauptkomponenten besteht: dem Content-Bereich für Inhalt wie Text oder Bilder, dem Padding als innerem Abstand zum Rand, dem Border als sichtbarem Rahmen und dem Margin als äußerem Abstand zu benachbarten Elementen. Schülerinnen und Schüler in Klasse 8 lernen, diese Komponenten zu erklären und in einfachen Layouts anzuwenden, etwa um Elemente zu zentrieren oder nebeneinander anzuordnen. Sie experimentieren mit Eigenschaften wie padding: 20px oder margin: auto und analysieren, wie Änderungen das Erscheinungsbild verändern.

Dieses Thema passt perfekt in die Einheit Web-Technologien und erfüllt KMK-Standards zu Strukturieren und Modellieren sowie Implementieren in der Sekundarstufe I. Es verbindet theoretisches Verständnis mit praktischer Programmierung und bereitet auf komplexere Responsive Designs vor. Durch visuelle Inspektionstools wie die Entwicklertools des Browsers erkennen Lernende den Einfluss jeder Komponente direkt.

Aktives Lernen eignet sich hervorragend, weil Schülerinnen und Schüler live im Code iterieren und unmittelbare Feedback-Schleifen erzeugen. Kollaboratives Debuggen in Gruppen macht abstrakte Räume greifbar, fördert Problemlösungsfähigkeiten und erhöht die Motivation durch sichtbare Erfolge.

Leitfragen

1. Erklären Sie die Komponenten des CSS Box-Modells (Content, Padding, Border, Margin).
2. Konstruieren Sie ein einfaches Layout mit CSS, das das Box-Modell berücksichtigt.
3. Analysieren Sie, wie Änderungen an Padding und Margin das Erscheinungsbild beeinflussen.

Lernziele

• Erklären Sie die vier Hauptkomponenten des CSS Box-Modells (Content, Padding, Border, Margin) und ihre Funktion.
• Konstruieren Sie ein einfaches Webseiten-Layout, das gezielt das CSS Box-Modell zur Positionierung und Abstandsgestaltung von Elementen nutzt.
• Analysieren Sie die Auswirkungen von Änderungen an den CSS-Eigenschaften padding und margin auf das visuelle Erscheinungsbild und die Abstände zwischen Elementen.
• Vergleichen Sie die Effekte von 'margin: auto' und expliziten Pixelwerten für Abstände bei der Zentrierung von Blockelementen.
• Demonstrieren Sie die Anwendung des Box-Modells zur Erstellung eines einfachen Navigationsmenüs oder einer Kartenansicht.

Bevor es losgeht

Grundlagen von HTML-Strukturierung

Warum: Schülerinnen und Schüler müssen wissen, wie HTML-Elemente wie `div`, `p` oder `img` grundlegend strukturiert werden, um sie mit CSS gestalten zu können.

Einführung in CSS-Selektoren und grundlegende Eigenschaften

Warum: Ein Verständnis für CSS-Selektoren (z.B. Elementselektoren) und grundlegende Eigenschaften wie `color` oder `background-color` ist notwendig, um das Box-Modell anwenden zu können.

Schlüsselvokabular

Content	Der eigentliche Inhalt eines HTML-Elements, wie Text, Bilder oder Videos. Dies ist der innerste Bereich der Box.
Padding	Der Abstand zwischen dem Content-Bereich und dem Border. Es schafft einen inneren Pufferraum und beeinflusst die visuelle Größe des Inhaltsbereichs.
Border	Der sichtbare Rahmen um den Padding- und Content-Bereich. Er kann eine Farbe, eine Dicke und einen Stil (z.B. durchgezogen, gestrichelt) haben.
Margin	Der Abstand außerhalb des Borders, der das Element von anderen Elementen auf der Seite trennt. Er schafft einen äußeren Freiraum.
Box-Modell	Ein konzeptionelles Modell, das jedes HTML-Element als rechteckige Box darstellt, bestehend aus Content, Padding, Border und Margin.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Padding und Margin sind dasselbe.

Was Sie stattdessen lehren sollten

Padding erweitert den Innenraum innerhalb der Border, Margin schafft Abstand außen. Aktive Experimente mit Browser-Inspektor helfen, da Schüler den Unterschied visuell sehen und durch Peer-Diskussion ihre Modelle korrigieren.

Häufige Fehlvorstellung

Margins kollabieren nicht.

Was Sie stattdessen lehren sollten

Angrenzende vertikale Margins kollabieren zum größeren Wert. In Gruppenaufgaben testen Lernende dies mit realen Beispielen und entdecken das Verhalten durch iterative Anpassungen, was das Verständnis vertieft.

Häufige Fehlvorstellung

Box-Sizing ist standardmäßig border-box.

Was Sie stattdessen lehren sollten

Standard ist content-box, bei dem Padding und Border die Breite erhöhen. Hands-on-Übungen mit Vergleichslayouts zeigen den Effekt klar und machen die Notwendigkeit von box-sizing: border-box evident.

Ideen für aktives Lernen

Paararbeit: Box aufbauen

Paare erstellen eine HTML-Seite mit einer div-Box und setzen nacheinander Content, Padding, Border und Margin per CSS. Sie dokumentieren Veränderungen mit Screenshots. Abschließend vergleichen sie Ergebnisse mit dem Partner.

30 Min.·Partnerarbeit

Lernen an Stationen: Layout-Experimente

Richten Sie drei Stationen ein: Station 1 für horizontale Zentrierung mit Margin, Station 2 für vertikale Ausrichtung mit Padding, Station 3 für Box-Sizing-Vergleich. Gruppen rotieren alle 10 Minuten und notieren Beobachtungen.

45 Min.·Kleingruppen

Whole Class: Gemeinsames Layout

Die Klasse baut gemeinsam ein einfaches Layout mit mehreren Boxen auf einem geteilten Codepad. Jeder Schüler schlägt eine Margin-Änderung vor, die Klasse testet und diskutiert den Effekt live im Browser.

35 Min.·Ganze Klasse

Individual: Persönliche Anpassung

Jeder Schüler nimmt das Klassenlayout und passt Padding und Margin an, um ein eigenes Design zu schaffen. Sie präsentieren die Unterschiede und erklären ihre Entscheidungen.

25 Min.·Einzelarbeit

Bezüge zur Lebenswelt

• Webdesigner nutzen das Box-Modell täglich, um Benutzeroberflächen für Websites und Apps zu gestalten. Beispielsweise entwerfen sie Layouts für Online-Shops wie Zalando, um Produktbilder und Beschreibungen ansprechend zu präsentieren und die Navigation zu erleichtern.
• Bei der Entwicklung von Benutzeroberflächen für Softwareanwendungen, wie zum Beispiel für das Betriebssystem Windows oder macOS, wird das Box-Modell verwendet, um die Abstände zwischen Schaltflächen, Textfeldern und Menüs präzise zu steuern und eine klare Struktur zu gewährleisten.
• Grafikdesigner, die im Bereich UI/UX arbeiten, verwenden das Box-Modell, um Wireframes und Mockups zu erstellen. Sie planen die Anordnung von Elementen für eine neue mobile Banking-App, um sicherzustellen, dass alle Informationen gut lesbar sind und die Benutzerführung intuitiv erfolgt.

Ideen zur Lernstandserhebung

Kurze Überprüfung

Zeigen Sie den Schülerinnen und Schülern ein einfaches HTML-Element mit angewandtem CSS. Bitten Sie sie, die vier Komponenten des Box-Modells (Content, Padding, Border, Margin) auf dem Bildschirm zu identifizieren und zu beschriften. Fragen Sie: 'Welche Komponente bestimmt den Abstand zum nächsten Element?'

Lernstandskontrolle

Geben Sie jeder Schülerin und jedem Schüler eine kleine Karte. Bitten Sie sie, eine CSS-Regel zu schreiben, die einem `div`-Element einen blauen Border von 2px Dicke und einen äußeren Abstand (Margin) von 15px nach oben und unten gibt. Fragen Sie zusätzlich: 'Was passiert visuell, wenn Sie den Padding-Wert erhöhen, ohne den Margin-Wert zu ändern?'

Diskussionsfrage

Stellen Sie eine einfache Webseite mit zwei nebeneinander liegenden Boxen dar, die unterschiedliche Padding-Werte haben. Fragen Sie die Klasse: 'Wie können wir die Abstände zwischen den Boxen vergrößern, ohne die Breite der Boxen selbst zu verändern? Welche CSS-Eigenschaft ist hierfür am besten geeignet und warum?'

Häufig gestellte Fragen

Was sind die Komponenten des CSS Box-Modells?

Das Box-Modell umfasst Content für den eigentlichen Inhalt, Padding als Abstand innerhalb der Border, Border als Rahmen und Margin als Abstand zu anderen Elementen. Schüler verstehen es am besten durch visuelle Tools: Öffnen Sie die Entwicklertools, um jede Schicht farbig hervorgehoben zu sehen. Praktische Übungen festigen dieses Wissen für stabile Layouts.

Wie baue ich ein einfaches Layout mit dem Box-Modell?

Beginnen Sie mit display: block, setzen Sie width: 80%, margin: 0 auto für Zentrierung. Fügen Sie padding: 1em und border: 1px solid black hinzu. Testen Sie Änderungen live: Erhöhen Sie Padding, um Innenraum zu vergrößern, und beobachten Sie, wie Margin Abstände steuert. So entsteht ein robustes, responsives Design.

Wie hilft aktives Lernen beim CSS Box-Modell?

Aktives Lernen macht das Box-Modell greifbar, indem Schüler direkt im Browser coden und Änderungen sehen. Paar- oder Gruppenarbeit fördert Diskussionen über Effekte von Padding vs. Margin, iterative Experimente bauen Intuition auf. Solche Ansätze reduzieren Frustration durch schnelles Feedback und steigern das Verständnis nachhaltig, wie KMK-Standards empfehlen.

Warum kollabieren Margins in CSS?

Vertikale Margins von Block-Elementen kollabieren, um unnötige Lücken zu vermeiden: Der Abstand wird zum Maximum der beiden Werte. Demonstrieren Sie das mit zwei divs und Flexbox-Vergleichen. Aktive Tests in der Klasse klären Missverständnisse und zeigen, wann Flex- oder Grid-Layouts Alternativen bieten.