Einführung in das Box-Modell

1.1 Grundlagen des Box-Modells

Das Box-Modell ist die Grundlage dafür, wie Elemente auf einer Webseite platziert werden und miteinander interagieren. Es definiert die Struktur und Größen von HTML-Elementen sowie deren Umrandung durch Abstände, Rahmen und äußere Abstände.

Grundlagen des Box-Modells

Das CSS-Box-Modell beschreibt den Aufbau von Blöcken in HTML-Elementen. Jedes Element besteht aus vier Hauptkomponenten:

• Inhalt (content).
• Innenabstand (padding).
• Rahmen (border).
• Äußere Abstände (margin).

Diese Komponenten bestimmen, wie ein Element angezeigt wird und wie es mit anderen Elementen auf der Seite interagiert.

Inhalt (Content)

Der Inhalt (content) ist der Hauptteil des Elements, der Text, Bilder oder andere verschachtelte Elemente enthält. Die Größe des Inhalts kann explizit mit den Eigenschaften width und height festgelegt werden oder durch den Inhalt des Elements bestimmt werden.

Anwendungsbeispiel

In diesem Beispiel umfasst der Inhalt des Elements .content den Text "Dies ist der Inhalt des Elements.":

    
      .content {
        background-color: #e0e0e0;
        padding: 20px;
        border: 2px solid #000;
        margin: 20px;
      }
    
  

    
      <div class="content">
        Dies ist der Inhalt des Elements.
      </div>
    
  

1.2 Visualisierung des Box-Modells

Jedes Element im Box-Modell kann als rechteckiger Block dargestellt werden, der aus den folgenden Teilen besteht:

• Inhalt (Content): Der innere Inhalt eines Elements, wie Text oder Bild
• Innenabstand (Padding): Der Abstand zwischen Inhalt und Rahmen des Elements
• Rahmen (Border): Die Linie, die den Innenabstand und Inhalt umgibt
• Äußerer Abstand (Margin): Der Abstand zwischen dem Rahmen eines Elements und benachbarten Elementen

Visualisierung des Box-Modells:

    
      .element {
        width: 200px;           /* Breite des Inhalts */
        padding: 10px;          /* Innenabstand */
        border: 2px solid red;  /* Rahmen */
        margin: 20px;           /* Äußerer Abstand */
      }
    
  

1.3 Rahmen (Border)

Rahmen (border) umgeben den Inhalt und die Innenabstände eines Elements. Rahmen können verschiedene Stile, Dicken und Farben haben. Sie können verwendet werden, um Elemente auf der Seite visuell hervorzuheben.

Anwendungsbeispiel

In diesem Beispiel wird ein Rahmen mit einer Stärke von 5 Pixeln, gepunktet und in Schwarz, um den Inhalt und die Innenabstände des Elements .border angewendet.

    
      .border {
        background-color: #e0e0e0;
        padding: 20px;
        border: 5px dashed #000;
        margin: 20px;
      }
    
  

    
      <div class="border">
        Dies ist ein Element mit einem Rahmen.
      </div>