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!

Hat dir der Beitrag gefallen?

😊 gefällt mir +0 😭 mag ich nicht -0Du hast bereits abgestimmt!

Domi

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

Das könnte dich interessieren!

Weitere Kategorien