CSS Schnellstart – Innenabstand (padding)
Da du nun weißt, wie man die Breite und Höhe der Box einstellt, gehen wir einen Schritt weiter. Manchmal möchtest du einen Innenabstand IN einem Element erstellen.
Dafür gibt es die padding-Eigenschaft. Aber auch hier gelten ein paar Besonderheiten.
Verwendest du die padding-Eigenschaft alleine, wird der Innenabstand oben, unten, links und rechts gesetzt.
.innenabstand {
padding: 50px;
}
Was, wenn du den Abstand nur an EINER Seite anlegen willst? Dafür gibt es Spezialeigenschaften:
| Name | Beschreibung | Beispiel |
| padding | Alle Seiten | padding: 50px; |
| padding-top | Obere Seite | padding-top: 50px; |
| padding-left | Linke Seite | padding-left: 50px; |
| padding-right | Rechte Seite | padding-right: 50px; |
| padding-bottom | Untere Seite | padding-bottom: 50px; |
WICHTIG: Die Zusätze -top, -left, -right, -bottom können an weitere Eigenschaften gehangen werden, z.B. margin, border, etc. Wir werden diese in den nächsten Lektionen automatisch verwenden!
Lass uns das mal direkt in der Übung anschauen!