Tag 3: Box-Modell & Abstände

Ziel

Lerne, wie das CSS-Box-Modell funktioniert und wie du Abstände und Layout mit Padding, Margin, Rahmen und Hintergrundeigenschaften steuerst.

Themen

Box-Modell: Inhalt, Padding, Rahmen, Margin
Breite & Höhe
Rahmenstile und border-radius
Hintergrundfarbe und Hintergrundbilder

Das Box-Modell

Jedes HTML-Element ist eine Box, die besteht aus:

Inhalt – der eigentliche Text oder das Element
Padding – Abstand innerhalb der Box um den Inhalt
Rahmen – der Rand um das Padding
Margin – Abstand außerhalb des Elements

Beispiel

div {
  width: 200px;
  height: 100px;
  padding: 10px;
  margin: 20px;
  border: 2px solid black;
  border-radius: 10px;
  background-color: lightgray;
}

Rahmenstile

div {
  border: 2px solid black;
  border-radius: 15px; /* abgerundete Ecken */
}

Hintergrund

div {
  background-color: lightblue;
}

section {
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
}

Übung

Gestalte eine Karte mit Padding, Margin, Rahmen und abgerundeten Ecken.
Füge einem Bereich ein Hintergrundbild hinzu.

Beispiel HTML & CSS

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Box-Modell Übung</title>
  <style>
    .card {
      width: 250px;
      padding: 20px;
      margin: 20px;
      border: 2px solid #333;
      border-radius: 15px;
      background-color: #ecf0f1;
      font-family: Arial, sans-serif;
    }

    .hero {
      height: 200px;
      background-image: url('background.jpg');
      background-size: cover;
      background-position: center;
      margin: 20px;
      border-radius: 10px;
    }
  </style>
</head>
<body>

  <h1>Box-Modell Beispiel</h1>

  <div class="card">
    <h2>Karten Titel</h2>
    <p>Dies ist eine gestaltete Karte mit Padding, Margin, Rahmen und border-radius.</p>
  </div>

  <section class="hero"></section>

</body>
</html>