veröffentlicht am: 16. September 2021
CSS: Padding erstellen – CSS Kurs
Ein Padding in CSS ist ein definierter Abstand um das Element in Pixel oder in Prozent
Beispiel: CSS Padding
.padding-beispiel{
/* Padding ist überall gleich */
padding:50px;
border: 1px solid #4CAF50;
}Ergebnis
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.
.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.
Kurzschreibweise von Padding mit 3 Werten
Wenn die Padding Schreibweise nur 3 Werte hat dann ist es so gemeint:
.padding-beispiel3{
/* Top, Right, Bottom */
padding: 15px 40px 25px;
}Ergebnis
Kurzschreibweise von Padding mit 3 Werten
Wenn die Padding Schreibweise nur 2 Werte hat dann ist es so gemeint:
.padding-beispiel4{
/* Top, Right */
padding: 15px 30px;
}Ergebnis
Jeden Padding Wert einzeln definieren
Du hast auch die Möglichkeit jeden einzelnen Padding Wert mit dieser Schreibweise zu definieren.
.padding-beispiel5{
padding-top: 20px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 40px;
}Ergebnis
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!
Über Mich
Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite
