CSS lernen - Den Innenabstand (Padding) mit CSS definieren.

CSS Padding

Mit CSS Padding können Sie den Innenabstand zwischen dem Inhalt eines Elements und seinem Rahmen definieren. Der Padding-Bereich um den Inhalt herum ist transparent. Wenn Sie also zum Beispiel einem <div>-Element einen Padding-Wert von 10px und einen roten Hintergrund geben:

div {
    padding: 10px;
    background-color: red;
}

So wird, der Padding-Bereich ebenfalls rot erscheinen.

Padding für die einzelnen Seiten definieren

Sie können den Padding-Wert für jede Seite eines Elements definieren. Dazu gibt es die Eigenschaften: padding-top, padding-right, padding-bottom, padding-left

Man kann also folgende Definition setzen:

div {
    padding-left: 10px;
    padding-right: 12px;
}

Padding kann mit den folgenden Werten angegeben werden:

• Länge - gibt eine Auffüllung in px, em, rem, pt, cm usw. an.
• % - gibt eine Breite in Prozent (%) der Breite des enthaltenden Elements an.
• inherit - gibt an, dass die Breite vom übergeordneten Element geerbt werden soll.

CSS Padding in Kurzschreibweise

Die padding-Eigenschaft besitzt eine Kurzform. Diese wird genutzt um zu vermeiden, dass das Padding jeder Seite separat festgelegt werden muss (dh. padding-top, padding-right, padding-bottom und padding-left).

Schauen wir uns die folgenden Beispiele an, um zu verstehen, wie die Kurzform angewendet werden kann

div {
    padding: 50px; 
    /* Anwendung für alle 4 Seiten */
}
h1 {
    padding: 25px 75px; 
    /* 25px oben und unten | 75px links und rechts */
}
h2 {
    padding: 25px 50px 75px; 
    /* oben | horizontal | unten */
}
h3 {
    padding: 25px 50px 75px 100px; 
    /* Uhrzeigersinn: top | right | bottom | left */
}

Diese Kurzschreibweise kann einen, zwei, drei oder vier durch Leerzeichen getrennte Werte annehmen.

• Wenn ein Wert angegeben wird, wird er auf alle vier Seiten angewendet.
• Wenn zwei Werte angegeben werden, wird der erste Wert auf die obere und untere Seite und der zweite Wert auf die rechte und linke Seite der Elementbox angewendet.
• Wenn drei Werte definiert sind, ist der erste Wert für oben bestimmt, der zweite Wert wird für die rechte und linke Seite angewendet, und der letzte Wert wird für unten genutzt.
• Wenn vier Werte angegeben sind, werden sie in der angegebenen Reihenfolge auf die obere , rechte , untere und linke Seite der Elementbox angewendet. Denken Sie bei der Verwendung am besten immer an einen Uhrzeiger

Es wird empfohlen, die Kurzschreibweise zu verwenden. Dies hilft Ihnen, Zeit zu sparen, da Sie zusätzliche Eingaben vermeiden und der CSS-Code einfacher zu lesen ist.

Auswirkung von Padding und Border auf das Layout

Beim Erstellen von Webseiten-Layouts führt das Hinzufügen von Padding oder Border-Werten manchmal zu unerwarteten Ergebnissen. Dies liegt daran, dass Padding und Border zur Breite und Höhe der vom Element erzeugten Box addiert werden (wie wir im Kapitel CSS-Boxmodell gelernt haben).

Wenn wir beispielsweise die Breite eines <div>-Elements auf 100% Bildschirmbreite setzen und dazu ein Padding von 50px setzen, wird eine horizontale Scrolleiste angezeigt, da der <div>-Container plötzlich eine Breite von 100% Bildschirmbreite + 100px Padding hat.

div {
    width: 100%;
    padding: 25px;
}

Um zu verhindern, dass Padding oder Border die Abmessungen eines Elements ändern, können Sie die Eigenschaft box-sizing: border-box; verwenden. In den nächsten Kapiteln werden wir auf diese Eigenschaft aber noch einmal genauer eingehen.