CSS: Padding erstellen – CSS Kurs

Ein Padding in CSS ist ein definierter Abstand um das Element in Pixel oder in Prozent

Beispiel: CSS Padding

1
2
3
4
5
6
7
8
.padding-beispiel{

/* Padding ist überall gleich */

padding:50px;
border: 1px solid #4CAF50;

}

Ergebnis

Dieser Container hat ein Padding von 50px

Kurzschreibweise von Padding mit 4 Werten

Du kannst das Padding für jede Seite einstellen, es muss nicht überall 50px sein. Die Kurzschreibweise sieht dann so aus.

1
2
3
4
5
6
7
.padding-beispiel2{

/* Top, Right, Bottom, Left */

padding: 25px 50px 75px 100px;

}
  • top padding ist 25px
  • right padding ist 50px
  • bottom padding ist 75px
  • left padding ist 100px

Ergebnis

So sieht dann die Kurzschreibweise aus.

Dies ist das Padding

Kurzschreibweise von Padding mit 3 Werten

Wenn die Padding Schreibweise nur 3 Werte hat dann ist es so gemeint:

1
2
3
4
5
6
7
.padding-beispiel3{

/* Top, Right, Bottom */

  padding: 15px 40px 25px;

}

Ergebnis

Dies ist das Padding

Kurzschreibweise von Padding mit 3 Werten

Wenn die Padding Schreibweise nur 2 Werte hat dann ist es so gemeint:

1
2
3
4
5
6
7
.padding-beispiel4{

/* Top, Right */

  padding: 15px 30px;

}

Ergebnis

Dies ist das Padding

Jeden Padding Wert einzeln definieren

Du hast auch die Möglichkeit jeden einzelnen Padding Wert mit dieser Schreibweise zu definieren.

1
2
3
4
5
6
7
8
9
.padding-beispiel5{

  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 30px;
  padding-left: 40px;


}

Ergebnis

Dies ist das Padding

Fazit

Wenn du in CSS ein Padding erstellen möchtest geht das relativ einfach. Allerdings gibt es dafür mehrere verschiedene Schreibweisen. Ich habe dir die wichtigsten versucht verständlich zu erklären. Viel Spaß mit CSS!





weitere Beiträge zum Thema CSS




Schreibe einen Kommentar



24803