Webseite Schnellstart – Abstände
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!
Neben dem Innenabstand gibt es auch den Außenabstand. Hier wird der Abstand zwischen Rand und dem Nachbar-Element angegeben.
Diese Eigenschaft nennt sich margin und kann ähnlich verwendet werden wie die padding-Eigenschaft:
.abstand {
margin: 25px;
}
Viel mehr gibt es dazu nicht zu sagen, also lass uns direkt in die Übung schauen: