Modul 6: Das Box Model verstehen

lock
Bevorstehend

Lerne, wie Abstände, Rahmen und Grössen in CSS funktionieren

Ziele dieses Moduls
  • Sie koennen das CSS Box Model anwenden und Abstände sowie Grössen gezielt steuern
    Anwenden

Das Box Model ist eines der wichtigsten Konzepte in CSS. Jedes HTML-Element ist eine 'Box' mit Inhalt, Padding, Border und Margin.

Das CSS Box Model

Jedes Element in CSS ist eine rechteckige Box mit vier Bereichen:

  • Content: Der eigentliche Inhalt (Text, Bild, etc.)
  • Padding: Innenabstand zwischen Content und Border
  • Border: Rahmen um das Element
  • Margin: Aussenabstand zu anderen Elementen

Wichtig: width und height beziehen sich standardmässig nur auf den Content-Bereich!

Box Model

.card {
    width: 300px;
    height: 200px;
    
    /* Innenabstand (oben rechts unten links) */
    padding: 20px;
    
    /* Rahmen */
    border: 2px solid #ddd;
    border-radius: 8px; /* Abgerundete Ecken */
    
    /* Aussenabstand */
    margin: 20px;
    
    /* Hintergrund und Schatten */
    background-color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Verschiedene Werte für jede Seite */
.element {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    
    /* Kurzform: oben rechts unten links */
    padding: 10px 20px 10px 20px;
    
    /* Noch kürzer: vertikal horizontal */
    padding: 10px 20px;
}

Note

Box-Sizing: Ein wichtiger Trick

Standardmässig addiert CSS padding und border zur width. Das kann nervig sein! Mit box-sizing: border-box werden sie eingerechnet:

* { box-sizing: border-box; }

Das solltest du immer am Anfang deiner CSS-Datei haben - es macht das Leben leichter!

Challenge

Übung: Netflix-Style Card

Schau dir eine Card auf Netflix, Spotify oder YouTube an. Erstelle eine ähnliche Card mit:

  • Feste Breite (z.B. 300px)
  • Ein Bild oben (verwende Platzhalter: https://picsum.photos/300/200)
  • Darunter ein Titel (<h3>) und kurzer Text (<p>)
  • Passende Paddings für den Text (z.B. 20px)
  • Einen feinen Rahmen oder Schatten
  • Abgerundete Ecken
  • Einen Hover-Effekt (z.B. Schatten wird stärker)

Inhalt: Du kannst einen Film, ein Album, ein Buch oder ein Rezept vorstellen - sei kreativ!

/* Tipp: So könnte dein CSS-Start aussehen */

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    padding: 40px;
}

.card {
    width: 300px;
    background: white;
    border-radius: 8px;
    overflow: hidden; /* Bild folgt border-radius */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s; /* Smooth hover */
}

.card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}