CSS: Padding erstellen – CSS Kurs

Nicht deine Sprache?

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

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.

.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:

.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:

.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.

.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!


Über Mich





[wpdreams_ajaxsearchlite]

Google Chrome: Energiesparmodus aktivieren – So gehts

Ja du hast richtig gehört, Google Chrome hat einen Energiesparmodus und wir aktivieren ihn jetzt...

Google Chrome: Seitenleiste links & rechts ändern

Es ist ja bekanntlich Geschmackssache ob die Seitenleiste link oder rechts angeordnet ist. Aber du...

Google Chrome: Untertitel für Videos aktivieren

Wenn du nicht mehr so gut hören kannst, dann ist es sinnvoll den Untertitel beim...

Google Chrome: Design ändern – So gehts

Wenn du genauso wie ich von dem langweiligen Standarddesign von Google Chrome genug hast, gibt...

Google Chrome: Lesezeichenleiste ausblenden & einblenden

Die Lesezeichenleiste von Google Chrome ist zwar ganz cool nimmt aber einfach zu viel Platz...

Google Chrome: Schriftgröße & Schriftart ändern

Oft ist die standard Schriftart von Google Chrome langweilig oder die Schriftart ist dir einfach...

Google Chrome: Rechtschreibprüfung aktivieren & deaktivieren

Wenn dich die Rechschreibprüfung bei Google Chrome nervt kannst du sie deaktivieren und auch wieder...

Google Chrome: Webseite mit Zoom vergrößern & verkleinern

Mit zunehmendem Alter werden unsere Augen schlechter. Aber keine Panik dafür hat Google Chrome ein...

Firefox: Cookies & Cache beim beenden löschen – So gehts

Wenn du möchtest, dass deine Cookies beim Beenden des Firefox automatisch gelöscht werden, dann ist...

Firefox: Lesezeichen exportieren & importieren – So gehts

Oft will man seinen Computer neu aufsetzen und dann muss man seine Lesezeichen exportieren, um...

Firefox Browser: Schriftart & Schriftgröße ändern

Findest du bei Firefox die Schriftart langweilig oder die Schriftgröße zu klein? Hast du auch...

Firefox Browser: Linkfarbe ändern – So gehts

Die Linkfarbe bei Browser wie dem Firefox schau oft ähnlich aus. Wenn du aber bei...

Firefox Browser: Erweiterung installieren – So gehts

Du möchtest deinen Firefox Browser mit Erweiterungen verbessern? Logo dann schauen wir uns da mal...

Safari Browser: Erweiterung hinzufügen – So gehts

Hey du Safari-Entdecker! Du möchtest gerne eine Erweiterung hinzufügen, um dein Browsing-Erlebnis noch besser zu...

Safari Browser: Passwörter anzeigen – So gehts

Wenn du deine Passwörter von gespeicherten Webseiten verwalten möchtest, dann geht das ziemlich einfach. In...