Aufgabe:

  1. Vergrößere Abstand zwischen Boxen (Margin).

  2. Erhöhe Innenabstand (Padding).

  3. Entferne testweise den Rahmen.

  4. Füge eine neue Box mit eigenem Text hinzu.

Erklärung:

Jedes HTML-Element wird wie eine Box behandelt. Das Box-Modell beschreibt, wie sich Inhalt, Innenabstand, Rahmen und Außenabstand zusammensetzen:

  1. Content – der eigentliche Inhalt der Box (Text, Bilder, etc.)

  2. Padding – Abstand zwischen Inhalt und Rahmen

  3. Border – Rahmen um die Box

  4. Margin – Abstand zwischen dieser Box und anderen Elementen

Durch das Anpassen von Margin, Padding und Border kannst du das Layout kontrollieren und Elemente visuell voneinander trennen.

Hinweis: Wenn du mit "Untersuchen" die Konsole öffnest, kannst du auch das Box-Modell für jedes Modell betrachten:

Das Box-Modell für ein Element

Technische Umsetzung:

1. margin – Außenabstand

.box { 
  margin: 20px; 
}

  • margin-top, margin-right, margin-bottom, margin-left können einzeln angegeben werden.

    margin-top: 5px;
margin-bottom: 10px;

  • Positive Werte vergrößern den Abstand, negative Werte ziehen Elemente zusammen.

2. Padding – Innenabstand

.box { 
  padding: 15px; 
}

  • Padding erhöht den „Innenraum“ der Box und sorgt dafür, dass Text oder Bilder nicht am Rand kleben.

  • Auch hier können Top, Right, Bottom, Left individuell festgelegt werden.

    padding-left: 5px;
padding-right: 10px;

3. Border – Rahmen

.box {
  border: 2px solid #333333; /* Breite, Stil, Farbe */
}

  • Eine Border besteht aus 3 Werten: Dicke (2px), Rahmenart (solid) und Farbe (#333333)

  • Stilarten: solid (durchgezogen), dashed (gestrichelt), dotted (gepunktet)

  • Border kann auch entfernt werden: border: none;

4. Neue Box hinzufügen

HTML-Beispiel:

<section class="box"> 
  <p>"I am your father."</p> 
</section>

Mit Margin, Padding und Border wirkt diese Box sauber getrennt und gut lesbar.

 

Grundlegende Fachkonzepte (zum Merken)

Box-Modell

  • Jedes Element ist eine Box mit: Content, Padding, Border, Margin

Padding

  • Innenabstand zwischen Inhalt und Rahmen

  • Verstärkt Lesbarkeit und Struktur

Margin

  • Außenabstand zwischen Elementen

  • Erzeugt Luft und Ordnung im Layout

Border

  • Rahmen um die Box

  • Kann Dicke, Stil und Farbe haben

CSS Kurzschreibweise

  • margin: 10px 20px; → oben/unten 10px, rechts/links 20px

  • padding: 5px 10px 5px 10px; → oben, rechts, unten, links

Praktischer Tipp:

  • Nutze „Untersuchen“ im Browser, um sofort zu sehen, wie Margin, Padding und Border wirken, bevor du die Werte in style.css übernimmst.

Zuletzt geändert: Dienstag, 16. Dezember 2025, 09:14