Abstände

2.1 Innere Abstände (Padding)

Innere Abstände (padding) definieren den Raum zwischen dem Inhalt eines Elements und seinen Rändern. padding kann für jede Seite eines Elements festgelegt werden: oben, rechts, unten und links. Innere Abstände können nützlich sein, um Raum um den Inhalt eines Elements zu schaffen, damit dieser nicht direkt an den Rändern anliegt.

Beispiel der Anwendung

In diesem Beispiel haben wir ein Element mit der Klasse .padding und wenden innere Abstände von 20 Pixeln auf allen Seiten an, um Raum um den Inhalt zu schaffen.

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

    
      <div class="padding">
        Das ist ein Element mit inneren Abständen.
      </div>
    
  

2.2 Äußere Abstände (Margin)

Äußere Abstände (margin) definieren den Raum zwischen einem Element und seinen benachbarten Elementen. Äußere Abstände können für jede Seite eines Elements festgelegt werden: oben, rechts, unten und links. Sie sind nützlich, um Raum zwischen Elementen zu schaffen und deren Überlagerung zu vermeiden.

Beispiel der Anwendung:

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

    
      <div class="margin">
        Das ist ein Element mit äußeren Abständen.
      </div>
    
  

2.3 Interaktion von Komponenten im Box-Modell

Alle vier Komponenten des Box-Modells (Inhalt, Abstände, Ränder und äußere Abstände) arbeiten zusammen, um die Gesamtgröße und Position eines Elements auf der Seite zu bestimmen.

Beispiel der Interaktion von Komponenten:

    
      .box {
        background-color: #e0e0e0;
        padding: 20px;
        border: 5px solid #000;
        margin: 30px;
        width: 200px;
      }
    
  

    
      <div class="box">
        Das ist ein Element mit äußeren und inneren Abständen.
      </div>
    
  

Erklärung des Codes:

• Inhalt: Text innerhalb des Elements
• Abstände: 20 Pixel, die Raum zwischen Inhalt und Rand schaffen
• Ränder: 5 Pixel, die das Element umgeben
• Äußere Abstände: 30 Pixel, die Raum zwischen dem Element und anderen Elementen auf der Seite schaffen

2.4 Negative äußere Abstände

Äußere Abstände können negative Werte annehmen, was zu einer Überlappung von Elementen führt.

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

    
      <div>
        Das ist ein normales Element
      </div>
      <div class="negative-margin">
        Das ist ein Element mit negativem oberen Abstand.
      </div>
    
  

2.5 Kollaps von äußeren Abständen

Wenn vertikale äußere Abstände von zwei benachbarten Blöcken aufeinandertreffen, können sie sich zusammenfalten und einen einzigen Abstand bilden, der dem größeren der beiden entspricht.

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

      .box2 {
        background-color: #d0d0d0;
        padding: 20px;
        border: 2px solid #000;
        margin-top: 20px;
      }
    
  

    
      <div class="box1">
        Das ist das erste Element.
      </div>

      <div class="box2">
        Das ist das zweite Element. Die äußeren Abstände haben sich auf 30 Pixel zusammengefaltet.
      </div>